<!DOCTYPE html>
<html>
  <!-- meta/link... -->
  



<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <!-- Global site tag (gtag.js) - Google Analytics -->


  <title>YY&#39;s Blog</title>

  <link rel="icon" type="image/jpeg" href="/medias/favicon.jpg">
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_1911880_c1nvbyezg17.css">
  <link href="https://unpkg.com/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
  <link href="/js/swiper/swiper@5.4.1.min.css" rel="stylesheet">
  
  
  
  
<link rel="stylesheet" href="/css/animate.min.css">

  
<link rel="stylesheet" href="/css/style.css">

  
  
    
<link rel="stylesheet" href="/js/fancybox/jquery.fancybox.min.css">

  
  
    
<link rel="stylesheet" href="/js/shareJs/share.min.css">

  
  <style>
        @media (max-width: 992px) {
            #waifu {
                display: none;
            }
        }
    </style>
    <script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
    <link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">

    
        <script src="/js/valine/index.js"></script>
    

    <!-- import link -->
    
        
            
        
            
        
    
    <!-- import script -->
    
        
            <script>function blog_time() {window.setTimeout(blog_time,1000);const now = new Date();const copyrightTime = now.getFullYear();			display_copyright_time.innerHTML = " "+copyrightTime;}blog_time();</script>
        
            <script>function blog_live_time() {window.setTimeout(blog_live_time, 1000);const start = new Date('2020-10-01T00:00:00');const now = new Date();const timeDiff = (now.getTime() - start.getTime());					  const msPerMinute = 60 * 1000;					  const msPerHour = 60 * msPerMinute;					  const msPerDay = 24 * msPerHour;					  const passDay = Math.floor(timeDiff / msPerDay);					  const passHour = Math.floor((timeDiff % msPerDay) / 60 / 60 / 1000);					  const passMinute = Math.floor((timeDiff % msPerHour) / 60 / 1000);const passSecond = Math.floor((timeDiff % msPerMinute) / 1000);display_live_time.innerHTML = " " + passDay + " 天 " + passHour + " 小时 " + passMinute + " 分 " + passSecond + " 秒";}blog_live_time();</script>
        
    

    <!-- import daovoice -->
    

        <script>(function (i, s, o, g, r, a, m) {
            i['DaoVoiceObject'] = r;
            i[r] = i[r] ||
              function () {
                (i[r].q = i[r].q || []).push(arguments);
              };
            i[r].l = 1 * new Date();
            a = s.createElement(o);
            m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            a.charset = 'utf-8';
            m.parentNode.insertBefore(a, m);
          })(window, document, 'script', ('https:' === document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/5a027b89.js", 'daovoice');
          daovoice('init', {
            app_id: "5a027b89",
          });
          daovoice('update');
        </script>
      
    
<meta name="generator" content="Hexo 5.4.0"></head>

  
  <!-- 依赖于jquery和vue -->
  
    
<script src="https://unpkg.com/jquery@3.5.1/dist/jquery.min.js"></script>

  

  
    
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

  
  
  <body>
    <!-- 预加载动画 -->
    <!-- 页面预加载动画 -->

<div id='loader'>
  <link rel="stylesheet" href="/js/loaded/index.css" >
  <div class="loading-left-bg"></div>
  <div class="loading-right-bg"></div>
  <div class="spinner-box">
    <div class="configure-border-1">
      <div class="configure-core"></div>
    </div>
    <div class="configure-border-2">
      <div class="configure-core"></div>
    </div>
    <div class="loading-word">加载中...</div>
  </div>
</div>

<script>
  var endLoading = function () {
    document.body.style.overflow = 'auto';
    document.getElementById('loader').classList.add("loading");
  }
  window.addEventListener('DOMContentLoaded',endLoading);
  
</script>

    
    <!-- 判断是否为暗黑风格 -->
    <!-- 判断是否为黑夜模式 -->
<script>
  let isDark = JSON.parse(localStorage.getItem('dark')) || JSON.parse('false');

  if (isDark) {
    $(document.body).addClass('darkModel');
  }
</script>

    <!-- 需要在上面加载的js -->
    <script>
  function loadScript(src, cb) {
    return new Promise(resolve => {
      setTimeout(function () {
        var HEAD = document.getElementsByTagName("head")[0] || document.documentElement;
        var script = document.createElement("script");
        script.setAttribute("type", "text/javascript");
        if (cb) {
          if (JSON.stringify(cb)) {
            for (let p in cb) {
              if (p == "onload") {
                script[p] = () => {
                  cb[p]()
                  resolve()
                }
              } else {
                script[p] = cb[p]
                script.onload = resolve
              }
            }
          } else {
            script.onload = () => {
              cb()
              resolve()
            };
          }
        } else {
          script.onload = resolve
        }
        script.setAttribute("src", src);
        HEAD.appendChild(script);
      });
    });
  }

  //https://github.com/filamentgroup/loadCSS
  var loadCSS = function (href, before, media, attributes) {
    return new Promise(resolve => {
      setTimeout(function () {
        var link = document.createElement('link');
        link.rel = "stylesheet";
        link.href = src;
        link.onload = resolve;
        document.getElementsByTagName("head")[0].appendChild(link);
      });
    });
  };

</script> 

<!-- 轮播图所需要的js -->
<script src="/js/swiper/swiper.min.js"></script>
<script src="/js/swiper/vue-awesome-swiper.js"></script>
<script src="/js/swiper/swiper.animate1.0.3.min.js"></script>

<script type="text/javascript">
  Vue.use(window.VueAwesomeSwiper)
</script>


  <script src="/js/vue-typed-js/index.js"></script>


<!-- 首页的公告滚动插件的js需要重新加载 -->
<script src="/js/vue-seamless-scroll/index.js"></script>

<!-- 打字机效果js -->
<script src="https://unpkg.com/typed.js@2.0.11"></script>


    <div id="safearea">
      <main class="main" id="pjax-container">
        <!-- 头部导航 -->
        
<header class="header   " 
  id="navHeader"
  style="position: fixed;
  left: 0; top: 0; z-index: 10;width: 100%;"
>
  <div class="header-content">
    <div class="bars">
      <div id="appDrawer" class="sidebar-image">
  <div class="drawer-box-icon">
    <i class="fas fa-bars" aria-hidden="true" @click="showDialogDrawer"></i>
  </div>
  
  <transition name="fade">
    <div class="drawer-box_mask" v-cloak style="display: none;" v-show="visible" @click.self="cancelDialogDrawer">
    </div>
  </transition>
  <div class="drawer-box" :class="{'active': visible}">
    <div class="drawer-box-head bg-color">
      <img class="drawer-box-head_logo lazyload placeholder" src="/medias/logo.png" class="lazyload placeholder" data-srcset="/medias/logo.png" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="logo">
      <h3 class="drawer-box-head_title">YY&#39;s Blog</h3>
      <h5 class="drawer-box-head_desc">三十年河东，三十年河西，莫欺少年穷！</h5>
    </div>
    
    <div class="drawer-box-content">
      <ul class="drawer-box-content_menu">
        
          
            <li class="drawer-box-content_item" style="position: relative;">
              
                <a href="/" class="drawer-menu-item-link">
                  
                    <i class="fa fa-home" aria-hidden="true"></i>
                  
                  <span class="name">首页</span>
                </a>
              
            </li>
          
            <li class="drawer-box-content_item" style="position: relative;">
              
                <a href="/archives" class="drawer-menu-item-link">
                  
                    <i class="fa fa-archive" aria-hidden="true"></i>
                  
                  <span class="name">归档</span>
                </a>
              
            </li>
          
            <li class="drawer-box-content_item" style="position: relative;">
              
                <a href="/tags" class="drawer-menu-item-link">
                  
                    <i class="fa fa-tags" aria-hidden="true"></i>
                  
                  <span class="name">标签</span>
                </a>
              
            </li>
          
            <li class="drawer-box-content_item" style="position: relative;">
              
                <a href="/categories" class="drawer-menu-item-link">
                  
                    <i class="fa fa-bookmark" aria-hidden="true"></i>
                  
                  <span class="name">分类</span>
                </a>
              
            </li>
          
            <li class="drawer-box-content_item" style="position: relative;">
              
                <a href="/about" class="drawer-menu-item-link">
                  
                    <i class="fa fa-user" aria-hidden="true"></i>
                  
                  <span class="name">关于</span>
                </a>
              
            </li>
          
            <li class="drawer-box-content_item" style="position: relative;">
              
                <a href="/comments" class="drawer-menu-item-link">
                  
                    <i class="fa fa-comments" aria-hidden="true"></i>
                  
                  <span class="name">留言</span>
                </a>
              
            </li>
          
            <li class="drawer-box-content_item" style="position: relative;">
              
                <a href="/friends" class="drawer-menu-item-link">
                  
                    <i class="fa fa-book" aria-hidden="true"></i>
                  
                  <span class="name">友情链接</span>
                </a>
              
            </li>
          
            <li class="drawer-box-content_item" style="position: relative;">
              
                <a href="/love" class="drawer-menu-item-link">
                  
                    <i class="fa fa-heart" aria-hidden="true"></i>
                  
                  <span class="name">Love</span>
                </a>
              
            </li>
          
            <li class="drawer-box-content_item" style="position: relative;">
              
                <a href="javascript:;" class="drawer-menu-item-link has-children" @click="openOrCloseMenu(8)">
                  <span>
                    
                      <i class="fa fa-link"></i>
                    
                    <span class="name">更多</span>
                  </span>
                  <i class="fas fa-chevron-left arrow " :class="{'icon-rotate': isOpen(8)}" aria-hidden="true"></i>
                </a>
                <ul class="drawer-sub-menu" v-if="isOpen(8)">
                  
                  <li>
                    <a href="/gallery">
                      
                      <i class="fa fa-music" style="margin-top: -20px;"></i>
                      
                      <span>图库</span>
                    </a>
                  </li>
                  
                  <li>
                    <a href="/me">
                      
                      <i class="fa fa-user" style="margin-top: -20px;"></i>
                      
                      <span>关于我</span>
                    </a>
                  </li>
                  
                  <li>
                    <a href="/resources">
                      
                      <i class="fa fa-film" style="margin-top: -20px;"></i>
                      
                      <span>资源</span>
                    </a>
                  </li>
                  
                  <li>
                    <a target="_blank" rel="noopener" href="http://baidu.com">
                      
                      <i class="fa fa-wifi" style="margin-top: -20px;"></i>
                      
                      <span>百度</span>
                    </a>
                  </li>
                  
                </ul>
              
            </li>
          
        
        
          <li class="drawer-box-content_item">
            <a target="_blank" rel="noopener" href="https://gitee.com/yangyang-linux">
              <i class="fas fa-github" aria-hidden="true"></i>
              <span>Github</span>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</div>

<script>
  var body = document.body || document.documentElement || window;
  var vm = new Vue({
    el: '#appDrawer',
    data: {
      visible: false,
      top: 0,
      openArr: [],
    },
    computed: {
    },
    mounted() {
    },
    methods: {
      isOpen(index) {
        if (this.openArr.includes(index)) {
          return true;
        } else {
          return false;
        }
      },
      openOrCloseMenu(curIndex) {
        const index = this.openArr.indexOf(curIndex);
        if (index !== -1) {
          this.openArr.splice(index, 1);
        } else {
          this.openArr.push(curIndex);
        }
      },
      showDialogDrawer() {
        this.visible = true;
        // 防止页面滚动，只能让弹框滚动
        this.top = $(document).scrollTop()
        body.style.cssText = 'width: 100%; height: 100%;overflow: hidden;';
      },
      cancelDialogDrawer() {
        this.visible = false;
        body.removeAttribute('style');
        $(document).scrollTop(this.top)
      }
    },
    created() {}
  })
</script>

    </div>
    <div class="blog-title" id="author-avatar">
      
        <div class="avatar">
          <img src="/medias/logo.png" class="lazyload placeholder" data-srcset="/medias/logo.png" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="logo">
        </div>
      
      <a href="/" class="logo">YY&#39;s Blog</a>
    </div>
    <nav class="navbar">
      <ul class="menu">
        
          
            <li class="menu-item" style="position: relative;">
              
                <a href="/" class="menu-item-link" title="首页">
                  
                    <i class="fa fa-home" aria-hidden="true"></i>
                  
                  <span class="name">首页</span>
                </a>
              
            </li>
          
            <li class="menu-item" style="position: relative;">
              
                <a href="/archives" class="menu-item-link" title="归档">
                  
                    <i class="fa fa-archive" aria-hidden="true"></i>
                  
                  <span class="name">归档</span>
                </a>
              
            </li>
          
            <li class="menu-item" style="position: relative;">
              
                <a href="/tags" class="menu-item-link" title="标签">
                  
                    <i class="fa fa-tags" aria-hidden="true"></i>
                  
                  <span class="name">标签</span>
                </a>
              
            </li>
          
            <li class="menu-item" style="position: relative;">
              
                <a href="/categories" class="menu-item-link" title="分类">
                  
                    <i class="fa fa-bookmark" aria-hidden="true"></i>
                  
                  <span class="name">分类</span>
                </a>
              
            </li>
          
            <li class="menu-item" style="position: relative;">
              
                <a href="/about" class="menu-item-link" title="关于">
                  
                    <i class="fa fa-user" aria-hidden="true"></i>
                  
                  <span class="name">关于</span>
                </a>
              
            </li>
          
            <li class="menu-item" style="position: relative;">
              
                <a href="/comments" class="menu-item-link" title="留言">
                  
                    <i class="fa fa-comments" aria-hidden="true"></i>
                  
                  <span class="name">留言</span>
                </a>
              
            </li>
          
            <li class="menu-item" style="position: relative;">
              
                <a href="/friends" class="menu-item-link" title="友情链接">
                  
                    <i class="fa fa-book" aria-hidden="true"></i>
                  
                  <span class="name">友情链接</span>
                </a>
              
            </li>
          
            <li class="menu-item" style="position: relative;">
              
                <a href="/love" class="menu-item-link" title="Love">
                  
                    <i class="fa fa-heart" aria-hidden="true"></i>
                  
                  <span class="name">Love</span>
                </a>
              
            </li>
          
            <li class="menu-item" style="position: relative;">
              
                <a href="javascript:;" class="menu-item-link" title="更多">
                  
                    <i class="fa fa-link"></i>
                  
                  <span class="name">更多</span>
                  <i class="fas fa-chevron-down arrow" aria-hidden="true"></i>
                </a>
                <ul class="sub-menu">
                  
                  <li>
                    <a href="/gallery">
                      
                      <i class="fa fa-music" style="margin-top: -20px;"></i>
                      
                      <span>图库</span>
                    </a>
                  </li>
                  
                  <li>
                    <a href="/me">
                      
                      <i class="fa fa-user" style="margin-top: -20px;"></i>
                      
                      <span>关于我</span>
                    </a>
                  </li>
                  
                  <li>
                    <a href="/resources">
                      
                      <i class="fa fa-film" style="margin-top: -20px;"></i>
                      
                      <span>资源</span>
                    </a>
                  </li>
                  
                  <li>
                    <a target="_blank" rel="noopener" href="http://baidu.com">
                      
                      <i class="fa fa-wifi" style="margin-top: -20px;"></i>
                      
                      <span>百度</span>
                    </a>
                  </li>
                  
                </ul>
              
            </li>
          
        
      </ul>
      
      
        <div id="appSearch">
  <div class="search"  @click="showDialog()"><i class="fas fa-search" aria-hidden="true"></i></div>
  <transition name="fade">
    <div class="message-box_wrapper" style="display: none;" v-cloak v-show="dialogVisible" @click.self="cancelDialogVisible()">
      <div class="message-box animated bounceInDown">
        <h2>
          <span>
            <i class="fas fa-search" aria-hidden="true"></i>
            <span class="title">本地搜索</span>
          </span>
          <i class="fas fa-times close" pointer style="float:right;" aria-hidden="true" @click.self="cancelDialogVisible()"></i>
        </h2>
        <form class="site-search-form">
          <input type="text"
            placeholder="请输入关键字"
            id="local-search-input" 
            @click="getSearchFile()"
            class="st-search-input"
            v-model="searchInput"
          />
        </form>
        <div class="result-wrapper">
          <div id="local-search-result" class="local-search-result-cls"></div>
        </div>
      </div>
    </div>
  </transition>
</div>
<script src="/js/local_search.js"></script>
<script>
  var body = document.body || document.documentElement || window;
  var vm = new Vue({
    el: '#appSearch',
    data: {
      dialogVisible: false,
      searchInput: '',
      top: 0,
    },
    computed: {
    },
    mounted() {
      window.addEventListener('pjax:complete', () => {
        this.cancelDialogVisible();
      })
    },
    methods: {
      showDialog() {
        this.dialogVisible = true;
        // 防止页面滚动，只能让弹框滚动
        this.top = $(document).scrollTop()
        body.style.cssText = 'overflow: hidden;';
      },
      getSearchFile() {
        if (!this.searchInput) {
          getSearchFile("/search.xml");
        }
      },
      cancelDialogVisible() {
        this.dialogVisible = false;
        body.removeAttribute('style');
        $(document).scrollTop(this.top)
      },
    },
    created() {}
  })
</script>
<!-- 解决刷新页面闪烁问题，可以在元素上添加display: none, 或者用vue.extend方法，详情：https://blog.csdn.net/qq_31393401/article/details/81017912 -->
<!-- 下面是搜索基本写法 -->
<!-- <script type="text/javascript" id="local.search.active">
  var inputArea = document.querySelector("#local-search-input");
  inputArea.onclick   = function(){ getSearchFile(); this.onclick = null }
  inputArea.onkeydown = function(){ if(event.keyCode == 13) return false }
</script> -->

      

    </nav>
  </div>
  
    <a target="_blank" rel="noopener" href="https://gitee.com/yangyang-linux" class="github-corner color-primary" aria-label="View source on GitHub"><svg width="60" height="60" viewBox="0 0 250 250" style="fill:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
  
  
    <div id="he-plugin-simple"></div>
    <script>
      WIDGET = {
        CONFIG: {
          "modules": "012",
          "background": 5,
          "tmpColor": "4A4A4A",
          "tmpSize": 16,
          "cityColor": "4A4A4A",
          "citySize": 16,
          "aqiSize": 16,
          "weatherIconSize": 24,
          "alertIconSize": 18,
          "padding": "10px 10px 10px 10px",
          "shadow": "1",
          "language": "auto",
          "borderRadius": 5,
          "fixed": "false",
          "vertical": "middle",
          "horizontal": "center",
          "key": "2784dd3fcb1e4f0f9a9b579bf69641f2"
        }
      }
    </script>
    <script src="https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0"></script> 
    
</header>
        <!-- 内容区域 -->
        
  <!-- 首页轮播 -->
  

  <link href="/js/vue-typed-js/index.css" rel="stylesheet">






<div class="swiper-length" style="display: none;">4</div>
<div id="appSwiper"
  class=""
  @mouseenter="stopAutoPlay()" 
  @mouseleave="startAutoPlay()"
>
  <swiper v-cloak ref="mySwiper" :options="swiperOptions" @slideChangeTransitionEnd="slideChangeTransitionEnd">
    
      
        <swiper-slide>
          <div class="item swiper-lazy" data-background="https://img11.360buyimg.com/ddimg/jfs/t1/160978/33/20686/2476596/6083e62dEa588862b/63f8f2163ab61b2f.png" style="background-size: 300000px; 
            background-position: left center;" style="position: relative;">
            <div class="swiper-bgmask" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></div>
              <div class="flag">
                
                <div class="img-mask swiper-lazy swiper-default-bgImg" data-background="https://img11.360buyimg.com/ddimg/jfs/t1/160978/33/20686/2476596/6083e62dEa588862b/63f8f2163ab61b2f.png" style="height: 100%; background-size: cover; 
                  background-position: center center;">
                  <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>   
                </div>
                <div class="flag-text">
                  <div class="flag-text-content">
                    <div class="title ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">鸿鹄书晚风</div>
                    
                      <div  class="ani animated default-excerpt" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">
                        <vue-typed-js :strings="defaultDesc" :loop="defaultDescTypedLoop" :type-speed="100" :back-speed="50">
                          <h1 class="typing"></h1>
                        </vue-typed-js>
                      </div>
                      
                  </div>
                  <div style="display: flex;" class="flag-text-btns">
                    
                      <div class="ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s"><a target="_blank" rel="noopener" href="https://yuang01.gitee.io/2021/02/08/hexo-theme-bamboo-new/" class="read-more swiper-btn-color" style="display: inline-block; z-index:1;">阅读文档</a></div>
                    
                    
                      <div class="ani animated" style="margin-left: 10px;" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s"><a target="_blank" rel="noopener" href="https://gitee.com/yuang01/hexo-theme-bamboo/repository/archive/dev.zip" class="read-more swiper-btn-color2" style="display: inline-block; z-index:1;border: 1px solid white;">下载主题</a></div>
                    
                  </div>
                </div>
              </div>
          </div>
        </swiper-slide>
      
      
        
        
          
          <swiper-slide>
            <div class="item swiper-lazy" data-background="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" style=" background-size: 300000px; 
            background-position: left center;" style="position: relative;">
              <div class="swiper-bgmask" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></div>
              <div class="flag" style="z-index: 2;">
                <div class="img-mask swiper-lazy" data-background="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" style="height: 100%; background-size: cover; 
                  background-position: center center;">
                  <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>  
                </div>
                <div class="flag-text">
                  <div class="flag-text-content">
                    <div class="title ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">
                      <a href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/">
                        C开发网站
                      </a>
                    </div>
                    <div class="excerpt ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">C语言开发网站编程实战</div>
                  </div>
                  <div class="bottom-one-btn ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s"><a href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/" class="read-more swiper-btn-color" style="display: inline-block; z-index:1;">阅读更多</a></div>
                </div>
              </div>
            </div>

          </swiper-slide>
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
          
          <swiper-slide>
            <div class="item swiper-lazy" data-background="/medias/1.jpg" style=" background-size: 300000px; 
            background-position: left center;" style="position: relative;">
              <div class="swiper-bgmask" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></div>
              <div class="flag" style="z-index: 2;">
                <div class="img-mask swiper-lazy" data-background="/medias/1.jpg" style="height: 100%; background-size: cover; 
                  background-position: center center;">
                  <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>  
                </div>
                <div class="flag-text">
                  <div class="flag-text-content">
                    <div class="title ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">
                      <a href="/2021/07/12/2021-07-12-docker/">
                        Docker
                      </a>
                    </div>
                    <div class="excerpt ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">Docker学习</div>
                  </div>
                  <div class="bottom-one-btn ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s"><a href="/2021/07/12/2021-07-12-docker/" class="read-more swiper-btn-color" style="display: inline-block; z-index:1;">阅读更多</a></div>
                </div>
              </div>
            </div>

          </swiper-slide>
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
          
          <swiper-slide>
            <div class="item swiper-lazy" data-background="/medias/3.jpg" style=" background-size: 300000px; 
            background-position: left center;" style="position: relative;">
              <div class="swiper-bgmask" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></div>
              <div class="flag" style="z-index: 2;">
                <div class="img-mask swiper-lazy" data-background="/medias/3.jpg" style="height: 100%; background-size: cover; 
                  background-position: center center;">
                  <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>  
                </div>
                <div class="flag-text">
                  <div class="flag-text-content">
                    <div class="title ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">
                      <a href="/2021/04/02/2021-04-02-mysql-xue-xi-bi-ji/">
                        MySql学习笔记
                      </a>
                    </div>
                    <div class="excerpt ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">MySQL新手笔记</div>
                  </div>
                  <div class="bottom-one-btn ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s"><a href="/2021/04/02/2021-04-02-mysql-xue-xi-bi-ji/" class="read-more swiper-btn-color" style="display: inline-block; z-index:1;">阅读更多</a></div>
                </div>
              </div>
            </div>

          </swiper-slide>
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
          
          <swiper-slide>
            <div class="item swiper-lazy" data-background="/medias/1.jpg" style=" background-size: 300000px; 
            background-position: left center;" style="position: relative;">
              <div class="swiper-bgmask" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></div>
              <div class="flag" style="z-index: 2;">
                <div class="img-mask swiper-lazy" data-background="/medias/1.jpg" style="height: 100%; background-size: cover; 
                  background-position: center center;">
                  <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>  
                </div>
                <div class="flag-text">
                  <div class="flag-text-content">
                    <div class="title ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">
                      <a href="/2020/09/14/test/">
                        Hexo主题--Bamboo介绍
                      </a>
                    </div>
                    <div class="excerpt ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s">Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。



配置选项
默认值
描述



title
Markdown 的文件标题
文章标题，强烈建议填写此选项


date
文件创</div>
                  </div>
                  <div class="bottom-one-btn ani animated" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.2s" swiper-animate-delay="0.1s"><a href="/2020/09/14/test/" class="read-more swiper-btn-color" style="display: inline-block; z-index:1;">阅读更多</a></div>
                </div>
              </div>
            </div>

          </swiper-slide>
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
        
        
      
    <div class="swiper-pagination" slot="pagination" pointer style=""></div>
    <div class="swiper-button-prev swiper-button-white" pointer slot="button-prev" style=""></div>
    <div class="swiper-button-next swiper-button-white" pointer slot="button-next" style=""></div>
    
  </swiper>
  
    <div id="scroll-down" @click="toPostContent()">
      <a href="javascript:;">
        <i class="fas fa-angle-down scroll-down-effects"></i>
      </a>
    </div>
  
  <canvas id="header_canvas"style="position:absolute;bottom:0;width:100%;pointer-events:none;"></canvas>
  
    <svg class="hans-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none"><defs><path id="hans-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"></path></defs><g class="hans-parallax"><use xlink:href="#hans-wave" x="50" y="0" fill="rgba(224,233,239,.5)"></use><use xlink:href="#hans-wave" x="50" y="3" fill="rgba(224,233,239,.5)"></use><use xlink:href="#hans-wave" x="50" y="6" fill="rgba(224,233,239,.5)"></use></g></svg>
    
</div>


<style>.hans-parallax>use{animation:hans-wave-move 12s linear infinite}.hans-parallax>use:nth-child(1){animation-delay:-2s}.hans-parallax>use:nth-child(2){animation-delay:-2s;animation-duration:5s}.hans-parallax>use:nth-child(3){animation-delay:-4s;animation-duration:3s}@keyframes hans-wave-move{0%{transform:translate(-90px,0)}100%{transform:translate(85px,0)}}</style>
<style>
  .hans-container {
    position: absolute!important;
    bottom: 0;
    width: 100%;
    height: 120px;
    z-index: 100;
    pointer-events:none;
  }
</style>


<script>
  var autoplay = JSON.parse('false');
  var delay = '5000';
  var loop = JSON.parse('true') ? false : JSON.parse('true');
  var effect = 'slide';
  var swiperLength = parseInt(document.querySelector(".swiper-length").innerText);
  var defaultDesc = '煮酒洗净尘嚣，论知交,万般付之一笑，共偕老';
  defaultDesc = defaultDesc.split(',');
  var defaultDescTypedLoop = JSON.parse('true');
  var vm = new Vue({
    el: '#appSwiper',
    data: {
      defaultDesc: defaultDesc,
      defaultDescTypedLoop,
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 允许点击小圆点跳转
        },
        loop: loop ? true : false,
        effect, // fade
        autoplay: (autoplay && swiperLength > 1) ? {
  　　　　delay,
  　　　　disableOnInteraction: false // 手动切换之后继续自动轮播
    　　} : false,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        lazy: {
          loadPrevNext: true,
        },
        on:{
          init: function() {
            swiperAnimateCache(this); //隐藏动画元素 
            swiperAnimate(this); //初始化完成开始动画
          }, 
          slideChangeTransitionEnd: function(){ 
            swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
          } 
        }
        // Some Swiper option/callback...
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
    mounted() {
      // console.log('Current Swiper instance object', this.swiper)
      // this.swiper.slideTo(0, 1000, false)
    },
    methods: {
      stopAutoPlay() {
        (autoplay && swiperLength > 1) && this.swiper.autoplay.stop();
      },
      startAutoPlay() {
        (autoplay && swiperLength > 1) && this.swiper.autoplay.start();
      },
      slideChangeTransitionEnd() {
        console.log('1');
      },
      toPostContent() {
        const fullHeight = $(window).height() - 60;
        $('html,body').animate({scrollTop: fullHeight},500);
      }
    },
    created() {}
  })
</script>

  <script src="/js/bubble/homeBubble.js"></script>

<style>
#appSwiper {
  position: relative;
  user-select: none;
  overflow: hidden;
}
.default-excerpt {
  font-size: 1.6rem;
  margin-top: 1rem;
  font-family: Titillium Web,'PingFang SC','Hiragino Sans GB','Microsoft JhengHei','Microsoft YaHei',sans-serif;
}
.bottom-one-btn {
  margin-top: 15px;
}
.swiper-container {
  overflow: hidden;
  z-index: 0;
}
.swiper-slide {
  height: 350px;
  position: relative;
}
.swiper-button-prev,
.swiper-button-next {
  padding: 10px 10px;
  transition: background 0.2s;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: rgba(0, 0, 0, 0.2);
}
.swiper-slide .item {
  width: 100%;
  height: 100%;
}
.flag {
  position: relative;
  width: 70%;
  margin: 0 auto;
  color: #ffffff;
  height: 100%;
  background: #000;
}
.flag img {
  min-height: 100%;
}
.flag-text {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 80%;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 9999;
}
.flag-text .title {
  font-size: 1.8rem;
  font-family: Long Cang,cursive;
}
.flag-text .title a {
  color: #fff;
  transition: color 0.3s;
}
.flag-text .title a:hover {
  color: #42b983;
}
.flag-text .excerpt {
  color: #eee;
  font-family: Ubuntu,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  width: 70%;
  line-height: 30px;
  height: 150px;
  margin-top: 2%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #42b983;
}
.img-mask {
  opacity:0.6; filter: alpha(opacity=60);
}
.flag-text .read-more {
  margin-bottom: 30px;
  padding: 5px 15px;
  color: #ffffff;
  border-radius: 20px;
}
#scroll-down {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
#scroll-down a {
  color: #fff;
}
@-webkit-keyframes rightan
  {
  
  0%
  {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-30px);
    opacity: 1;
  }
  100%
  {
    transform: translateY(0);
    opacity: 0.5;
  }
}
.scroll-down-effects {
  animation: rightan 1.5s infinite;
}
/* 当头部导航设置为背景透明的时候 */

  .swiper-slide {
    height: 400px;
  }
  .flag-text {
    top: 80px;
  }


@media (min-width: 992px) {
  .swiper-button-prev {
    margin-left: 15%;
    transform: translateX(-180%);
  }
  .swiper-button-next {
    margin-right: 15%;
    transform: translateX(180%);
  }
  .flag-text .title {
    width: 80%;
    line-height: 35px;
    max-height: 70px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
@media screen and (max-width: 1200px) { 
  .flag {
    width: 80%;
  }
  .swiper-button-prev {
    margin-left: 10%;
    transform: translateX(-180%);
  }
  .swiper-button-next {
    margin-right: 10%;
    transform: translateX(180%);
  }
}
@media (max-width: 992px) {
  .flag {
    width: 100%;
  }
  .flag-text .title {
    font-size: 1.5rem;
    margin-top: 50px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .flag-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .flag-text .excerpt {
    width: 100%;
    line-height: 25px;
    height: 125px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }
  .flag-text .read-more {
    margin-bottom: 80px;
  }
}
@media (max-width: 992px) and (min-width: 551px) {
  .flag-text .excerpt {
    width: 70%;
  }
}
@media (max-width: 551px) {
  .swiper-slide {
    height: 250px;
  }
  .flag-text .title {
    line-height: 30px;
    max-height: 60px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: 20px;
  }
  .flag-text .excerpt {
    font-size: 1rem;
    line-height: 20px;
    height: 80px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
  .flag-text .excerpt { 
    margin-top: 10px;
  }
  .flag-text .read-more {
    margin-top: 10px;
    margin-bottom: 50px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    transform: scale(0.5);
  }
  .swiper-button-prev {
    left: 0;
  }
  .swiper-button-next {
    right: 0;
  }
}
/* 当头部导航设置为背景透明的时候 */

  @media (max-width: 992px) {
    .flag-text {
      top: 60px;
      height: 80%;
    }
  }
  @media (max-width: 551px) {
    .swiper-slide {
      height: 310px;
    }
  }


/* 文字或者按钮居中显示 */

  .flag-text {
    left: 10%;
  }
  .flag-text .flag-text-content {
    width: 100%;
    text-align: center;
  }
  .flag-text .title {
    width: 100%;
    text-align: center;
  }
  .flag-text .excerpt { 
    width: 100%;
    text-align: center;
  }
  .bottom-one-btn {
    display: flex;
    justify-content: center;
  }
  .default-excerpt {
    display: flex;
    justify-content: center;
    font-size: 1.6rem;
    font-family: Titillium Web,'PingFang SC','Hiragino Sans GB','Microsoft JhengHei','Microsoft YaHei',sans-serif;
  }
  .flag-text-btns {
    justify-content: center;
  }
  @media (min-width: 992px) {
    .flag-text .excerpt {
      line-height: 30px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      overflow: hidden;
    }
  }
  @media (max-width: 992px) {
    .flag-text {
      margin-left: 0;
      transform: translateX(0);
    }
  }




/* 全屏显示 */

  .flag {
    width: 100%;
  }
  .swiper-slide {
    height: calc(100vh - 60px);
    
      height: 100vh;
    
  }
  .flag-text {
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
    width: 70%;
    height: auto;
  }
  .flag-text .title {
    font-size: 2.8rem;
    line-height: 1.5em;
    max-height: none;
    /* overflow: visible; */
  }
  .flag-text .excerpt {
    font-size: 1.25rem;
    height: 150px;
  }
  .flag-text .read-more {
    margin-top: 10px;
  }
  .swiper-button-prev,
  .swiper-button-next {
    margin-top: -60px!important;
  }
  .swiper-btn-color,
  .swiper-btn-color2 {
    background-color: transparent;
    border: 1px solid #fff;
  }
  .swiper-btn-color:hover,
  .swiper-btn-color2:hover {
    background-color: #42b983;
    border: 1px solid #42b983!important;
  }
  .flag-text-btns {
    justify-content: center;
  }
  .swiper-button-prev {
    margin-left: 10px;
    transform: translateX(0);
    border-radius: 50%;
    padding: 0;
    width: 50px;
    height: 50px;
  }
  .swiper-button-next {
    margin-right: 10px;
    transform: translateX(0);
    border-radius: 50%;
    padding: 0;
    width: 50px;
    height: 50px;
  }
  .swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.2rem;
  }
  @media (min-width: 992px) {
    .flag-text .excerpt {
      line-height: 35px;
      height: 175px;
    }
    .default-excerpt {
      min-height: 150px;
    }
    .typed-element {
      align-items: unset;
    }
  }
  @media (max-width: 992px) {
    .flag-text {
      margin-left: 0;
      height: 60%;
      top: 55%;
    }
    .flag-text .title {
      font-size: 2.4rem;
      margin-top: 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .flag-text .excerpt {
      line-height: 35px;
      height: 185px;
    }
    .flag-text .read-more {
      margin-top: 20px;
    }
  }
  @media (max-width: 551px) {
    .flag-text {
      height: 60%;
    }
    .flag-text .title {
      font-size: 2.2rem;
    }
    .flag-text .excerpt {
      line-height: 30px;
    }
    .flag-text .read-more {
      margin-top: 50px;
      padding: 10px 30px;
    }
    .swiper-button-prev {
      margin-left: 0;
    }
    .swiper-button-next {
      margin-right: 0;
    }
    .default-excerpt {
      margin-top: 1rem;
    }
  }


/* video */
.swiper-video {
  width: 100%;
  height: 100%;
}
.swiper-video video {
  pointer-events: none;
}
.swiper-video-maskBox{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0.2;
  z-index: 1;
}
@media (min-width: 992px) {
  
    .swiper-video {
      display: none;
    }
    .swiper-default-bgImg {
      display: block;  
    }
  
}
@media (max-width: 992px) {
  .swiper-video {
    display: none;
  }
  .swiper-default-bgImg {
    display: block;  
  }
}
/* video-end */
</style>


<div id="l_main">
  <div class="l_content">
    <!-- 自定义的内容 -->
    
  
    <div class="widget welcome" id="welcome" style="order: -1;background: #fff">
      <header>
        
          <a style="color: blue" target="_blank" rel="noopener" href='https://api.amogu.cn/'><i class="fa fa-envelope fa-fw" aria-hidden="true"></i><span class='name'>欢迎</span></a>
        
      </header>
      <div class="content">
        <img src="https://i.loli.net/2021/09/02/2ejFW45AEqpGLwK.png" class="lazyload placeholder" data-srcset="https://i.loli.net/2021/09/02/2ejFW45AEqpGLwK.png" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" style="width:100%">
      </div>
  </div>
  
    <div class="widget my_github_container" id="my_github_container" style="order: -1;background: #fff">
      <header>
        
          <a style="color: blue" target="_blank" rel="noopener" href='https://github.com/'><i class="fa fa-envelope fa-fw" aria-hidden="true"></i><span class='name'>github日历</span></a>
        
      </header>
      <div class="content">
         <img no-lazy width="100%" hright="300px" src="https://ghchart.rshah.org/42b983/yangyang-linux" alt="yangyang-linux github" /> 
      </div>
  </div>
  

    <!-- 首页座右铭 -->
    
  <div class="motto">
      <h3 class="motto-title">座右铭</h3>
      <div class="motto-content">
        <p>
          沉淀后我愿意做个温暖的人，有自己的喜好，有自己的原则，有自己的信仰，不急功近利，不浮夸轻薄。宠辱不惊，淡定安逸，心静如水，不忘初心，方得始终。——凌茜  
        </p> 
      </div>
  </div>

    <!-- 首页公告 -->
    
<style>
  .index-notice-content {
    margin-top: 10px;
  }
  .warp {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  .index-notice-content__ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }
  .index-notice-content__ul li,
  .index-notice-content__ul a {
    display: block;
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
  }
  .index-notice-content__title {
    flex: 1;
    overflow: hidden;
  }
  .index-notice-content__title a,
  .index-notice-content__title span {
    overflow: hidden;
    display: block;
    text-overflow:ellipsis; 
    white-space: nowrap;
    height: 100%;
    width: 100%;
    color: #000;
  }
  .index-notice-content__title a:hover,
  .index-notice-content__title span:hover {
    text-decoration: underline;
  }
  .index-notice-content__date {
    min-width: 80px;
    margin-left: 5px;
    color: #000;
  }
</style>
<div class="index-notice" id="appIndexNotice">
    <h3>
      <i class="fas fa-bullhorn index-notice-icon"></i>公告
    </h3>
    <div class="index-notice-content">
      
      <vue-seamless-scroll
        :data="listData"
        :class-option="classOption"
        class="warp"
        style="height: 150px"
      >
        <ul class="index-notice-content__ul">
          
          
            <li>
              
                <div class="index-notice-content__title">
                  
                    <a href="https://yangyang-linux.gitee.io" title="#更新主题" style="color:blue">
                      #更新主题
                    </a>
                  
                </div>
                
                  <div class="index-notice-content__date" style="color:blue">
                    2022-05-23
                  </div>
                
              
            </li>
          
            <li>
              
                <div class="index-notice-content__title">
                  
                    <a href="https://yangyang-linux.gitee.io" title="#新增 daovoice(在线聊天)" style="color:blue">
                      #新增 daovoice(在线聊天)
                    </a>
                  
                </div>
                
                  <div class="index-notice-content__date" style="color:blue">
                    2022-01-24
                  </div>
                
              
            </li>
          
            <li>
              
                <div class="index-notice-content__title">
                  
                    <a target="_blank" rel="noopener" href="https://github.com/yuang01/hexo-theme-bamboo" title="#博客更新了侧边栏" style="color:red">
                      #博客更新了侧边栏
                    </a>
                  
                </div>
                
                  <div class="index-notice-content__date" style="color:red">
                    2021-10-10
                  </div>
                
              
            </li>
          
            <li>
              
                <div class="index-notice-content__title">
                  
                    <a href="https://yangyang-linux.gitee.io" title="#博客更新到2.0了（迁移）" style="color:red">
                      #博客更新到2.0了（迁移）
                    </a>
                  
                </div>
                
                  <div class="index-notice-content__date" style="color:red">
                    2021-08-21
                  </div>
                
              
            </li>
          
            <li>
              
                <div class="index-notice-content__title">
                  
                    <a target="_blank" rel="noopener" href="https://yangyang-linux.github.io" title="#博客1.0" style="color:blue">
                      #博客1.0
                    </a>
                  
                </div>
                
                  <div class="index-notice-content__date" style="color:blue">
                    2019-04-28
                  </div>
                
              
            </li>
           
        </ul>
      </vue-seamless-scroll>
    </div>
</div>
<script src="/js/vue-seamless-scroll/index.js"></script>

<!-- 滚动插件采用 vue-seamless-scroll
  https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/06-singleStop.html 
-->

<script>
  var seamless = JSON.parse('false');
  seamless = seamless ? 0 : 30;
  var listData = '[object Object],[object Object],[object Object],[object Object],[object Object]' || '';
  listData = listData.split(',');
  var vm = new Vue({
    el: '#appIndexNotice',
    data: {
      listData: listData,
      moveNum: 2,
      classOption: {
        singleHeight: seamless,
        limitMoveNum: listData.length
      },
    },
    computed: {
    },
    mounted() {
    },
    methods: {
    },
    created() {
      this.moveNum = parseInt(this.listData.length);
    }
  })
</script>



    <!-- 首页文章置顶 -->
    


<div class="topArticle reveal">
	<h3><i class="fas fa-thumbs-o-up" aria-hidden="true"></i>推荐文章</h3>
	<div class="articles">
		
			
				<div class="article-link">
					
					<div class="article" style="background-size: cover; 
						background-position: center center;">
						<img class="lazyload lazyload placeholder" src="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" class="lazyload placeholder" data-srcset="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
					</div>
					<div class="text">
						<div class="text-main">
							<div class="title"><a href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/">C开发网站</a></div>
							<div class="content">
								C语言开发网站编程实战
							</div>
						</div>
						<a href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/" class="more">
							<i class="fas fa-eye" aria-hidden="true"></i>阅读更多
						</a>
					</div>
				</div>
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
				<div class="article-link">
					
					<div class="article" style="background-size: cover; 
						background-position: center center;">
						<img class="lazyload lazyload placeholder" src="/medias/1.jpg" class="lazyload placeholder" data-srcset="/medias/1.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
					</div>
					<div class="text">
						<div class="text-main">
							<div class="title"><a href="/2021/07/12/2021-07-12-docker/">Docker</a></div>
							<div class="content">
								Docker学习
							</div>
						</div>
						<a href="/2021/07/12/2021-07-12-docker/" class="more">
							<i class="fas fa-eye" aria-hidden="true"></i>阅读更多
						</a>
					</div>
				</div>
			
		
			
		
			
		
			
				<div class="article-link">
					
					<div class="article" style="background-size: cover; 
						background-position: center center;">
						<img class="lazyload lazyload placeholder" src="/medias/11.jpg" class="lazyload placeholder" data-srcset="/medias/11.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
					</div>
					<div class="text">
						<div class="text-main">
							<div class="title"><a href="/2021/07/04/2021-07-04-ping-ke-jiao-ben/">评课脚本</a></div>
							<div class="content">
								源码1234567891011var i=1; while(i&lt;=50)&#123;	if(document.ge
							</div>
						</div>
						<a href="/2021/07/04/2021-07-04-ping-ke-jiao-ben/" class="more">
							<i class="fas fa-eye" aria-hidden="true"></i>阅读更多
						</a>
					</div>
				</div>
			
		
			
		
			
		
			
		
			
		
			
		
			
				<div class="article-link">
					
					<div class="article" style="background-size: cover; 
						background-position: center center;">
						<img class="lazyload lazyload placeholder" src="/medias/3.jpg" class="lazyload placeholder" data-srcset="/medias/3.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
					</div>
					<div class="text">
						<div class="text-main">
							<div class="title"><a href="/2021/04/02/2021-04-02-mysql-xue-xi-bi-ji/">MySql学习笔记</a></div>
							<div class="content">
								MySQL新手笔记
							</div>
						</div>
						<a href="/2021/04/02/2021-04-02-mysql-xue-xi-bi-ji/" class="more">
							<i class="fas fa-eye" aria-hidden="true"></i>阅读更多
						</a>
					</div>
				</div>
			
		
			
		
			
		
			
		
			
		
			
				<div class="article-link">
					
					<div class="article" style="background-size: cover; 
						background-position: center center;">
						<img class="lazyload lazyload placeholder" src="/medias/5.jpg" class="lazyload placeholder" data-srcset="/medias/5.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
					</div>
					<div class="text">
						<div class="text-main">
							<div class="title"><a href="/2021/01/01/2021-01-01-xin-xi-xie-lu-cha-xun/">信息泄露查询</a></div>
							<div class="content">
								信息泄露查询
							</div>
						</div>
						<a href="/2021/01/01/2021-01-01-xin-xi-xie-lu-cha-xun/" class="more">
							<i class="fas fa-eye" aria-hidden="true"></i>阅读更多
						</a>
					</div>
				</div>
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
		
			
				<div class="article-link">
					
					<div class="article" style="background-size: cover; 
						background-position: center center;">
						<img class="lazyload lazyload placeholder" src="/medias/10.jpg" class="lazyload placeholder" data-srcset="/medias/10.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
					</div>
					<div class="text">
						<div class="text-main">
							<div class="title"><a href="/1999/11/10/1999-11-10-mou-xue-xi-rao-guo/">每天一个小技巧-大学习绕过</a></div>
							<div class="content">
								某大学习绕过须知
除了冰冰姐不要绕过，其他绕过

方法1.copy下列链接至微信，发给文件传输小助手或者任何一个人都可

							</div>
						</div>
						<a href="/1999/11/10/1999-11-10-mou-xue-xi-rao-guo/" class="more">
							<i class="fas fa-eye" aria-hidden="true"></i>阅读更多
						</a>
					</div>
				</div>
			
		
	</div>
</div>


    <div class="bg-floor" id="home-bg-floor" style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: -2;"></div>
    <!-- 每一篇文章卡片 -->
    <!-- hash算法 -->

<section class="posts">
  
    
    <article class="post reveal" style="flex-direction: row-reverse;   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2023-05-22</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/">C开发网站</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

    <i class="iconfont icontag"></i>
    <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/C%E8%AF%AD%E8%A8%80/" rel="tag">C语言</a></li></ul>

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->

<div class="article-category">
  <i class="iconfont iconbookmark1"></i>
  <a class="article-category-link" href="/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">学习笔记</a>
</div>


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" class="lazyload placeholder" data-srcset="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            C语言开发网站编程实战
          </div>
        </div>
        <div class="post-more">
          <a href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/">
            <i class="iconfont iconmore" pointer style="float: right;  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" class="lazyload placeholder" data-srcset="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
    
    <article class="post reveal" style="   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2022-05-25</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2022/05/25/kd-shu-he-jue-ce-shu/">kd树和决策树</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2022/05/25/kd-shu-he-jue-ce-shu/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="/medias/13.jpg" class="lazyload placeholder" data-srcset="/medias/13.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            kd树和决策树
          </div>
        </div>
        <div class="post-more">
          <a href="/2022/05/25/kd-shu-he-jue-ce-shu/">
            <i class="iconfont iconmore" pointer style="  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2022/05/25/kd-shu-he-jue-ce-shu/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="/medias/13.jpg" class="lazyload placeholder" data-srcset="/medias/13.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
    
    <article class="post reveal" style="flex-direction: row-reverse;   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2022-03-14</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2022/03/14/2022-03-14-c-yu-yan-linux-wang-luo-bian-cheng/">c语言linux网络编程</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

    <i class="iconfont icontag"></i>
    <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/C%E8%AF%AD%E8%A8%80/" rel="tag">C语言</a></li></ul>

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2022/03/14/2022-03-14-c-yu-yan-linux-wang-luo-bian-cheng/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="/medias/6.jpg" class="lazyload placeholder" data-srcset="/medias/6.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            c语言linux网络编程（tcp&udp）
          </div>
        </div>
        <div class="post-more">
          <a href="/2022/03/14/2022-03-14-c-yu-yan-linux-wang-luo-bian-cheng/">
            <i class="iconfont iconmore" pointer style="float: right;  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2022/03/14/2022-03-14-c-yu-yan-linux-wang-luo-bian-cheng/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="/medias/6.jpg" class="lazyload placeholder" data-srcset="/medias/6.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
    
    <article class="post reveal" style="   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2021-10-12</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2021/10/12/2021-10-12-ctfshow-zhong-ji-kao-he/">ctfshowweb终极考核</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

    <i class="iconfont icontag"></i>
    <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ctfshow/" rel="tag">ctfshow</a></li></ul>

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2021/10/12/2021-10-12-ctfshow-zhong-ji-kao-he/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="/medias/9.jpg" class="lazyload placeholder" data-srcset="/medias/9.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            ctfshow的web入门的终极考核
          </div>
        </div>
        <div class="post-more">
          <a href="/2021/10/12/2021-10-12-ctfshow-zhong-ji-kao-he/">
            <i class="iconfont iconmore" pointer style="  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2021/10/12/2021-10-12-ctfshow-zhong-ji-kao-he/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="/medias/9.jpg" class="lazyload placeholder" data-srcset="/medias/9.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
    
    <article class="post reveal" style="flex-direction: row-reverse;   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2021-10-04</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2021/10/04/2021-10-04-final-ben-ji-lian-jie-centos-shu-ju-ku/">连接centos数据库（mysql）</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

    <i class="iconfont icontag"></i>
    <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E7%AC%94%E8%AE%B0/" rel="tag">笔记</a></li></ul>

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->

<div class="article-category">
  <i class="iconfont iconbookmark1"></i>
  <a class="article-category-link" href="/categories/%E7%AC%94%E8%AE%B0/">笔记</a>
</div>


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2021/10/04/2021-10-04-final-ben-ji-lian-jie-centos-shu-ju-ku/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="/medias/1.jpg" class="lazyload placeholder" data-srcset="/medias/1.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            使用finalshell本机链接虚拟机centosmysql数据库
          </div>
        </div>
        <div class="post-more">
          <a href="/2021/10/04/2021-10-04-final-ben-ji-lian-jie-centos-shu-ju-ku/">
            <i class="iconfont iconmore" pointer style="float: right;  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2021/10/04/2021-10-04-final-ben-ji-lian-jie-centos-shu-ju-ku/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="/medias/1.jpg" class="lazyload placeholder" data-srcset="/medias/1.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
    
    <article class="post reveal" style="   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2021-09-14</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2021/09/14/linux-xue-xi-bi-ji/">Linux学习笔记</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

    <i class="iconfont icontag"></i>
    <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" rel="tag">学习笔记</a></li></ul>

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->

<div class="article-category">
  <i class="iconfont iconbookmark1"></i>
  <a class="article-category-link" href="/categories/linux/">linux</a>
</div>


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2021/09/14/linux-xue-xi-bi-ji/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="https://pic4.zhimg.com/80/v2-5c062983ace7db9601880019190fb5a8_1440w.jpg" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-5c062983ace7db9601880019190fb5a8_1440w.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            linux命令学习笔记
          </div>
        </div>
        <div class="post-more">
          <a href="/2021/09/14/linux-xue-xi-bi-ji/">
            <i class="iconfont iconmore" pointer style="  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2021/09/14/linux-xue-xi-bi-ji/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="https://pic4.zhimg.com/80/v2-5c062983ace7db9601880019190fb5a8_1440w.jpg" class="lazyload placeholder" data-srcset="https://pic4.zhimg.com/80/v2-5c062983ace7db9601880019190fb5a8_1440w.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
    
    <article class="post reveal" style="flex-direction: row-reverse;   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2021-09-02</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2021/09/02/zi-xue-lu-xian/">自学路线</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

    <i class="iconfont icontag"></i>
    <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E7%AC%94%E8%AE%B0/" rel="tag">笔记</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E8%87%AA%E5%AD%A6/" rel="tag">自学</a></li></ul>

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->

<div class="article-category">
  <i class="iconfont iconbookmark1"></i>
  <a class="article-category-link" href="/categories/%E8%87%AA%E5%AD%A6/">自学</a>
</div>


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2021/09/02/zi-xue-lu-xian/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="/medias/9.jpg" class="lazyload placeholder" data-srcset="/medias/9.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            黑客自学路线
          </div>
        </div>
        <div class="post-more">
          <a href="/2021/09/02/zi-xue-lu-xian/">
            <i class="iconfont iconmore" pointer style="float: right;  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2021/09/02/zi-xue-lu-xian/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="/medias/9.jpg" class="lazyload placeholder" data-srcset="/medias/9.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
    
    <article class="post reveal" style="   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2021-09-01</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2021/09/01/xss-wei-xiao-payload/">xss微小payload</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

    <i class="iconfont icontag"></i>
    <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/xss/" rel="tag">xss</a></li></ul>

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->

<div class="article-category">
  <i class="iconfont iconbookmark1"></i>
  <a class="article-category-link" href="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a>
</div>


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2021/09/01/xss-wei-xiao-payload/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="/medias/11.jpg" class="lazyload placeholder" data-srcset="/medias/11.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            XSS-Payloads123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585
          </div>
        </div>
        <div class="post-more">
          <a href="/2021/09/01/xss-wei-xiao-payload/">
            <i class="iconfont iconmore" pointer style="  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2021/09/01/xss-wei-xiao-payload/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="/medias/11.jpg" class="lazyload placeholder" data-srcset="/medias/11.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
    
    <article class="post reveal" style="flex-direction: row-reverse;   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2021-08-21</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2021/08/21/hello-world/">Hello World</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2021/08/21/hello-world/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="/medias/7.jpg" class="lazyload placeholder" data-srcset="/medias/7.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hex
          </div>
        </div>
        <div class="post-more">
          <a href="/2021/08/21/hello-world/">
            <i class="iconfont iconmore" pointer style="float: right;  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2021/08/21/hello-world/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="/medias/7.jpg" class="lazyload placeholder" data-srcset="/medias/7.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
    
    <article class="post reveal" style="   ">
      <div class="post-main">
        <div class="post-info">
          <div class="post-time">
            <i class="fas fa-clock" aria-hidden="true"></i>
            <span class="post-time">2021-08-13</span>
          </div>
          <div class="post-title">
            <a class="post-title-link" href="/2021/08/13/2021-08-13-ctfshow-de-web-ru-men/">ctfshowweb入门</a>
          </div>
          <div class="post-meta">
            <div class="post-tags">
              <!-- 文章详情页的标签 -->

    <i class="iconfont icontag"></i>
    <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ctfshow/" rel="tag">ctfshow</a></li></ul>

            </div>
            <div class="post-categories">
              <!-- 文章详情页的分类 -->


            </div>
          </div>
          <div class="post-img-mobile">
            <a href="/2021/08/13/2021-08-13-ctfshow-de-web-ru-men/" style="background-size: cover; 
              background-position: center center;">
              <img class="lazyload lazyload placeholder" src="/medias/2.jpg" class="lazyload placeholder" data-srcset="/medias/2.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
            </a>
          </div>
          <div class="post-content">
            ctfshow的web入门
          </div>
        </div>
        <div class="post-more">
          <a href="/2021/08/13/2021-08-13-ctfshow-de-web-ru-men/">
            <i class="iconfont iconmore" pointer style="  " title="阅读更多"></i>
          </a>
        </div>
      </div>
      <div class="post-img">
        <a href="/2021/08/13/2021-08-13-ctfshow-de-web-ru-men/" style="background-size: cover; 
          background-position: center center;">
          <img class="lazyload lazyload placeholder" src="/medias/2.jpg" class="lazyload placeholder" data-srcset="/medias/2.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
        </a>
      </div>
    </article>
  
</section>
    <!-- 翻页 -->
    
  <!-- <nav class="page-nav">
    <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/2/">下一页</a>
  </nav> -->
  <div class="page-nav">
    
    <div class="page-info">
        <div class="page-info-text">1 / 6</div>
    </div>
    
      <a href="/page/2/"
         class="page-nav-next">
          <span class="mr-5">下一页</span><i class="fas fa-angle-right"></i>
      </a>
      
  </div>

  </div>

  
<aside id='l_side'>
  
    
      
        <section class="widget side_blogger">
  <div class='content'>
    
      
        <a class='avatar flat-box circle' href='/me/'>
          <img src='http://q1.qlogo.cn/g?b=qq&nk=2985409357&s=100&t=1547904810'/>
        </a>
      
    
    
      <div class='text'>
        
          <h2>鸿鹄书晚风</h2>
        
        
          <p>三十年河东，三十年河西，莫欺少年穷！</p>

        
        
          <p><span id="jinrishici-sentence">YY's Blog</span></p>
          <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
        
      </div>
    
    
      <div class="social-wrapper">
        
          
            <a href="/atom.xml"
              class="social fas fa-rss flat-btn"
              target="_blank"
              rel="external nofollow noopener noreferrer">
              
            </a>
          
        
          
            <a href="mailto:2985409357@qq.com"
              class="social fas fa-envelope flat-btn"
              target="_blank"
              rel="external nofollow noopener noreferrer">
              
            </a>
          
        
          
            <a href="https://github.com/yangyang-linux/"
              class="social fab fa-github flat-btn"
              target="_blank"
              rel="external nofollow noopener noreferrer">
              
            </a>
          
        
          
            <a href="tencent://AddContact/?fromId=50&amp;fromSubId=1&amp;subcmd=all&amp;uin=2985409357"
              class="social fab fa-qq flat-btn"
              target="_blank"
              rel="external nofollow noopener noreferrer">
              
            </a>
          
        
      </div>
    
  </div>
</section>

      
    
  
  
  
    
  

  <div class="layout_sticky">
    
      
    <section class="widget side_category">
      
  <header>
    
      <a style="color: " href='/categories/'><i class="fas fa-folder-open fa-fw" aria-hidden="true"></i><span class='name'>文章分类</span></a>
    
  </header>


      <div class='content'>
        <ul class="entry navigation">
          
            <li><a class="flat-box"
              title="/categories/linux/" href="/categories/linux/"
              id="categorieslinux"
              ><div class='name'>linux</div><div class='badge'>(1)</div></a></li>
          
            <li><a class="flat-box"
              title="/categories/%E5%89%8D%E7%AB%AF/" href="/categories/%E5%89%8D%E7%AB%AF/"
              id="categoriesE5898DE7ABAF"
              ><div class='name'>前端</div><div class='badge'>(1)</div></a></li>
          
            <li><a class="flat-box"
              title="/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" href="/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
              id="categoriesE5ADA6E4B9A0E7AC94E8AEB0"
              ><div class='name'>学习笔记</div><div class='badge'>(1)</div></a></li>
          
            <li><a class="flat-box"
              title="/categories/%E7%AC%94%E8%AE%B0/" href="/categories/%E7%AC%94%E8%AE%B0/"
              id="categoriesE7AC94E8AEB0"
              ><div class='name'>笔记</div><div class='badge'>(1)</div></a></li>
          
            <li><a class="flat-box"
              title="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/" href="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/"
              id="categoriesE7BD91E7BB9CE5AE89E585A8"
              ><div class='name'>网络安全</div><div class='badge'>(1)</div></a></li>
          
            <li><a class="flat-box"
              title="/categories/%E8%87%AA%E5%AD%A6/" href="/categories/%E8%87%AA%E5%AD%A6/"
              id="categoriesE887AAE5ADA6"
              ><div class='name'>自学</div><div class='badge'>(1)</div></a></li>
          
            <li><a class="flat-box"
              title="/categories/%E8%AF%AD%E8%A8%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" href="/categories/%E8%AF%AD%E8%A8%80%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"
              id="categoriesE8AFADE8A880E5ADA6E4B9A0E7AC94E8AEB0"
              ><div class='name'>语言学习笔记</div><div class='badge'>(1)</div></a></li>
          
        </ul>
      </div>
    </section>
  
  
    
    
      
<section class="widget side_tagcloud">
    
  <header>
    
      <a style="color: " href='/tags/'><i class="fas fa-tags fa-fw" aria-hidden="true"></i><span class='name'>热门标签</span></a>
    
  </header>


    <div class='content'>
    <a href="/tags/AWD/" style="font-size: 14px; color: #999">AWD</a> <a href="/tags/Blog/" style="font-size: 15.67px; color: #8e8e8e">Blog</a> <a href="/tags/CTF/" style="font-size: 14px; color: #999">CTF</a> <a href="/tags/C%E8%AF%AD%E8%A8%80/" style="font-size: 15.67px; color: #8e8e8e">C语言</a> <a href="/tags/Docker/" style="font-size: 14px; color: #999">Docker</a> <a href="/tags/Git/" style="font-size: 15.67px; color: #8e8e8e">Git</a> <a href="/tags/Hexo/" style="font-size: 14px; color: #999">Hexo</a> <a href="/tags/Insecure-CAPTCHA/" style="font-size: 14px; color: #999">Insecure CAPTCHA</a> <a href="/tags/JAVA/" style="font-size: 20.67px; color: #6c6c6c">JAVA</a> <a href="/tags/Kali/" style="font-size: 14px; color: #999">Kali</a> <a href="/tags/Linux/" style="font-size: 14px; color: #999">Linux</a> <a href="/tags/MySQL/" style="font-size: 14px; color: #999">MySQL</a> <a href="/tags/OSI%E5%8F%82%E8%80%83%E6%A8%A1%E5%9E%8B/" style="font-size: 14px; color: #999">OSI参考模型</a> <a href="/tags/QQ/" style="font-size: 14px; color: #999">QQ</a> <a href="/tags/SQL%E6%B3%A8%E5%85%A5/" style="font-size: 14px; color: #999">SQL注入</a> <a href="/tags/TCP%E9%80%9A%E4%BF%A1/" style="font-size: 14px; color: #999">TCP通信</a> <a href="/tags/csrf/" style="font-size: 14px; color: #999">csrf</a> <a href="/tags/ctf/" style="font-size: 14px; color: #999">ctf</a> <a href="/tags/ctfshow/" style="font-size: 17.33px; color: #828282">ctfshow</a> <a href="/tags/dvwa/" style="font-size: 24px; color: #555">dvwa</a> <a href="/tags/hexo-theme-bamboo/" style="font-size: 14px; color: #999">hexo-theme-bamboo</a> <a href="/tags/jekyll%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/" style="font-size: 14px; color: #999">jekyll音乐播放器</a> <a href="/tags/php/" style="font-size: 14px; color: #999">php</a> <a href="/tags/pjax/" style="font-size: 14px; color: #999">pjax</a> <a href="/tags/python/" style="font-size: 17.33px; color: #828282">python</a> <a href="/tags/sqli-labs/" style="font-size: 15.67px; color: #8e8e8e">sqli-labs</a> <a href="/tags/sql%E6%B3%A8%E5%85%A5/" style="font-size: 15.67px; color: #8e8e8e">sql注入</a> <a href="/tags/upload-labs/" style="font-size: 14px; color: #999">upload-labs</a> <a href="/tags/vscode/" style="font-size: 14px; color: #999">vscode</a> <a href="/tags/xss/" style="font-size: 14px; color: #999">xss</a> <a href="/tags/%E4%BC%AA%E5%8D%8F%E8%AE%AE/" style="font-size: 14px; color: #999">伪协议</a> <a href="/tags/%E4%BF%A1%E6%81%AF%E6%94%B6%E9%9B%86/" style="font-size: 14px; color: #999">信息收集</a> <a href="/tags/%E5%91%BD%E4%BB%A4%E6%89%A7%E8%A1%8C/" style="font-size: 14px; color: #999">命令执行</a> <a href="/tags/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" style="font-size: 14px; color: #999">学习笔记</a> <a href="/tags/%E5%B0%8F%E6%8A%80%E5%B7%A7/" style="font-size: 19px; color: #777">小技巧</a> <a href="/tags/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/" style="font-size: 17.33px; color: #828282">文件上传</a> <a href="/tags/%E6%96%87%E4%BB%B6%E5%8C%85%E5%90%AB/" style="font-size: 14px; color: #999">文件包含</a> <a href="/tags/%E6%9A%B4%E5%8A%9B%E7%A0%B4%E8%A7%A3/" style="font-size: 14px; color: #999">暴力破解</a> <a href="/tags/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/" style="font-size: 14px; color: #999">渗透测试</a> <a href="/tags/%E7%AB%AF%E5%8F%A3%E6%89%AB%E6%8F%8F/" style="font-size: 14px; color: #999">端口扫描</a> <a href="/tags/%E7%AC%94%E8%AE%B0/" style="font-size: 22.33px; color: #606060">笔记</a> <a href="/tags/%E8%84%9A%E6%9C%AC/" style="font-size: 14px; color: #999">脚本</a> <a href="/tags/%E8%87%AA%E5%AD%A6/" style="font-size: 14px; color: #999">自学</a>
    </div>
</section>

  
    
    
  <section class="widget side_recent_post">
    
  <header>
    
      <a style="color: " href='/tags/'><i class="fas fa-book fa-fw" aria-hidden="true"></i><span class='name'>最新文章</span></a>
    
  </header>


    <div class='content'>
      
      <!-- hash算法 -->
      
      <div class="aside-list">
        
          <div class="aside-list-item">
            
            
            

            <div class="post-img-box">
              <a href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/" class="post-img " style="background-size: cover; 
                background-position: center center;">
                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" class="lazyload placeholder" data-srcset="http://i0.hdslb.com/bfs/archive/bf50b5a5f6840765d8e7baa5e0bc283153fe70e3.png" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
              </a>
            </div>
            <div class="post-date-title">
              <div>
                
                  <span class="post-date">05-22</span>
                
              </div>
              <a class="post-title" href="/2023/05/22/2023-05-22-c-kai-fa-wang-zhan/">C开发网站</a>
            </div>
          </div>
        
          <div class="aside-list-item">
            
            
            

            <div class="post-img-box">
              <a href="/2022/05/25/kd-shu-he-jue-ce-shu/" class="post-img " style="background-size: cover; 
                background-position: center center;">
                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="/medias/13.jpg" class="lazyload placeholder" data-srcset="/medias/13.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
              </a>
            </div>
            <div class="post-date-title">
              <div>
                
                  <span class="post-date">05-25</span>
                
              </div>
              <a class="post-title" href="/2022/05/25/kd-shu-he-jue-ce-shu/">kd树和决策树</a>
            </div>
          </div>
        
          <div class="aside-list-item">
            
            
            

            <div class="post-img-box">
              <a href="/2022/03/14/2022-03-14-c-yu-yan-linux-wang-luo-bian-cheng/" class="post-img " style="background-size: cover; 
                background-position: center center;">
                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="/medias/6.jpg" class="lazyload placeholder" data-srcset="/medias/6.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
              </a>
            </div>
            <div class="post-date-title">
              <div>
                
                  <span class="post-date">03-14</span>
                
              </div>
              <a class="post-title" href="/2022/03/14/2022-03-14-c-yu-yan-linux-wang-luo-bian-cheng/">c语言linux网络编程</a>
            </div>
          </div>
        
          <div class="aside-list-item">
            
            
            

            <div class="post-img-box">
              <a href="/2021/10/12/2021-10-12-ctfshow-zhong-ji-kao-he/" class="post-img " style="background-size: cover; 
                background-position: center center;">
                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="/medias/9.jpg" class="lazyload placeholder" data-srcset="/medias/9.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
              </a>
            </div>
            <div class="post-date-title">
              <div>
                
                  <span class="post-date">10-12</span>
                
              </div>
              <a class="post-title" href="/2021/10/12/2021-10-12-ctfshow-zhong-ji-kao-he/">ctfshowweb终极考核</a>
            </div>
          </div>
        
          <div class="aside-list-item">
            
            
            

            <div class="post-img-box">
              <a href="/2021/10/04/2021-10-04-final-ben-ji-lian-jie-centos-shu-ju-ku/" class="post-img " style="background-size: cover; 
                background-position: center center;">
                <img class="lazyload lazyload placeholder" style="width:100%;height:100%;object-fit:cover;" data-src="/medias/1.jpg" class="lazyload placeholder" data-srcset="/medias/1.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="">
              </a>
            </div>
            <div class="post-date-title">
              <div>
                
                  <span class="post-date">10-04</span>
                
              </div>
              <a class="post-title" href="/2021/10/04/2021-10-04-final-ben-ji-lian-jie-centos-shu-ju-ku/">连接centos数据库（mysql）</a>
            </div>
          </div>
        
      </div>
    </div>
  </section>

    
  <section class="widget side_archives">
    
    <header><a style="color: red" href='/archives/'><i class="fas fa-archive fa-fw" aria-hidden="true"></i><span class='name'>归档</span></a></header><div class="content"><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2023/05/"><span class="card-archive-list-date">五月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/05/"><span class="card-archive-list-date">五月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2022/03/"><span class="card-archive-list-date">三月 2022</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/10/"><span class="card-archive-list-date">十月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/09/"><span class="card-archive-list-date">九月 2021</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/08/"><span class="card-archive-list-date">八月 2021</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/07/"><span class="card-archive-list-date">七月 2021</span><span class="card-archive-list-count">5</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/06/"><span class="card-archive-list-date">六月 2021</span><span class="card-archive-list-count">4</span></a></li></ul></div>
  </section>

    <section class="widget side_webinfo">
  
  <header>
    
      <i style="color: " class="fas fa-chart-line fa-fw" aria-hidden="true"></i><span class='name'>站点信息</span>
    
  </header>


  <div class='content'>
    <div class="webinfo">
      
        <div class="webinfo-item">
          <div>文章数目：</div>
          <div>58 篇</div>
        </div>
      

      
        <div class="webinfo-item">
          <div>已运行时间：</div>
          <div id="webinfo-runtime-count" publish_date="03/24/2020 21:34:09"></div>
        </div>
        <script>
          var BirthDay = new Date(new Date('2020/01/01'));
          var today = new Date();
          var timeold = (today.getTime() - BirthDay.getTime());
          var daysold = Math.floor(timeold / (24 * 60 * 60 * 1000));
          document.getElementById('webinfo-runtime-count').innerHTML = daysold + ' 天';
        </script>
      


      
        <div class="webinfo-item">
          <div>本站总字数：</div>
          <div>107.3k 字</div>
        </div>
      

      
        <div class="webinfo-item">
          <div>本站访客数：</div>
          
          <div><span id="busuanzi_value_site_uv"><i class="fas fa-fan fa-spin fa-fw" aria-hidden="true"></i></span> 人</div>
          
        </div>
      

      
        <div class="webinfo-item">
          <div>本站总访问量：</div>
          
          <div><span id="busuanzi_value_site_pv"><i class="fas fa-fan fa-spin fa-fw" aria-hidden="true"></i></span> 次</div>
          
        </div>
      

      
        <div class="webinfo-item">
          <div>最后活动时间：</div>
          
            <div id="last-update" style="display: none;">Mon Aug 07 2023 22:24:09 GMT+0800 (中国标准时间)</div>
            <div id="last-update-show">2023-08-07 日</div>
          
        </div>
        
        <script>
          function timeago(dateTimeStamp) {
              var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
              var hour = minute * 60;
              var day = hour * 24;
              var week = day * 7;
              var month = day * 30;
              var now = new Date().getTime(); //获取当前时间毫秒
              var diffValue = now - dateTimeStamp; //时间差
              if (diffValue < 0) {
                  return;
              }
              var minC = diffValue / minute; //计算时间差的分，时，天，周，月
              var hourC = diffValue / hour;
              var dayC = diffValue / day;
              var weekC = diffValue / week;
              var monthC = diffValue / month;
              if (monthC >= 1 && monthC <= 3) {
                  result = " " + parseInt(monthC) + " 月前"
              } else if (weekC >= 1 && weekC <= 3) {
                  result = " " + parseInt(weekC) + " 周前"
              } else if (dayC >= 1 && dayC <= 6) {
                  result = " " + parseInt(dayC) + " 天前"
              } else if (hourC >= 1 && hourC <= 23) {
                  result = " " + parseInt(hourC) + " 小时前"
              } else if (minC >= 1 && minC <= 59) {
                  result = " " + parseInt(minC) + " 分钟前"
              } else if (diffValue >= 0 && diffValue <= minute) {
                  result = "刚刚"
              } else {
                  var datetime = new Date();
                  datetime.setTime(dateTimeStamp);
                  var Nyear = datetime.getFullYear();
                  var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
                  var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
                  var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
                  var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
                  var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
                  result = Nyear + "-" + Nmonth + "-" + Ndate
              }
              return result;
          }
          var lastUpDate = document.getElementById('last-update').innerHTML;
          try {
            document.getElementById('last-update-show').innerHTML = timeago(new Date(lastUpDate));
          } catch (error) {
            document.getElementById('last-update-show').innerHTML = '2023-08-07 日';
          }
        </script>
        
      
    </div>
  </div>
</section>
    
  
    <div class="widget testWidget" id="testWidget" style="order: -1;background: #fff">
      <header>
        
          <a style="color: #d63130" target="_blank" rel="noopener" href='https://www.sina.com.cn/'><i class="fab fa-weibo fa-fw" aria-hidden="true"></i><span class='name'>微博热搜</span></a>
        
      </header>
      <div class="content">
         <div id="myWeibo">
<!-- 如果不要滚动，则去掉 vue-seamless-scroll标签就行了，这个插件使用cdn向左向右滚动好像有问题 -->
<vue-seamless-scroll :data="content" :class-option="classOption" class="warp" > <div class="weibo-container" v-for="(item, index) in content" :key="index"> <div class="left"> <div class="order" :class="{ red: index<=2 }">{{index + 1}}</div> <div class="name"><a :href="item.url" target="_blank">{{item.name}}</a></div> </div> <div class="hot">{{item.hot}}</div> </div> </vue-seamless-scroll> </div>
<script src="/weibo/index.js"></script> <link href="/weibo/index.css" rel="stylesheet"> 
      </div>
  </div>
  
    <div class="widget historyToday" id="historyToday" style="order: -1;background: #fff">
      <header>
        
          <a style="color: #d63130" target="_blank" rel="noopener" href='http://baidu.com'><i class="fa fa-calendar-week fa-fw" aria-hidden="true"></i><span class='name'>历史上的今天</span></a>
        
      </header>
      <div class="content">
         <div id="myHistorySwiper" @mouseenter="stopAutoPlay()" @mouseleave="startAutoPlay()"> <swiper class="myhistoryswiper" ref="myhistoryswiper" style="height:80px;" :options="swiperOption"> <swiper-slide v-for="(item, index) in content" :key="index"> {{item}} </swiper-slide> </swiper> </div> <script src="/historyToday/index.js"></script> 
      </div>
  </div>
  
    <div class="widget testLove" id="testLove" style="order: -1;background: #fff">
      <header>
        
          <a style="color: #d63130" href='https://yangyang-linux.gitee.io/love'><i class="fa fa-heart fa-fw" aria-hidden="true"></i><span class='name'>恋爱墙</span></a>
        
      </header>
      <div class="content">
        
<div style="text-align: center;"> <img src="https://z3.ax1x.com/2021/07/10/WSZG7R.jpg" class="lazyload placeholder" data-srcset="https://z3.ax1x.com/2021/07/10/WSZG7R.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" />
<img src="./medias/love.gif" class="lazyload placeholder" data-srcset="./medias/love.gif" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" alt="love" style="width: 60px; border-radius: 50%;">
<img src="https://z3.ax1x.com/2021/07/10/WSZQcF.jpg" class="lazyload placeholder" data-srcset="https://z3.ax1x.com/2021/07/10/WSZQcF.jpg" srcset="https://img10.360buyimg.com/ddimg/jfs/t1/157667/29/9156/134350/603c6445Ebbc9cabe/41219c5d36d45072.gif" style="width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;" /><br /> <span id="htmer_time"></span> </div>
<script data-pjax src="/love_time/index.js"></script> 
      </div>
  </div>
  

  </div>
</aside>

</div>
<!-- 花瓣和雪花飘落 -->
<!-- 雪花和花瓣特效 -->



<!-- 灯笼 -->


      </main>
    </div>

    <!-- 页脚 -->
    
  
  <!-- 底部鱼儿跳动效果，依赖于jquery-->
<div id="j-fish-skip" style=" position: relative;height: 153px;width: auto;"></div>
<script>
  var RENDERER = {
    POINT_INTERVAL: 5,
    FISH_COUNT: 3,
    MAX_INTERVAL_COUNT: 50,
    INIT_HEIGHT_RATE: .5,
    THRESHOLD: 50,
    FISH_COLOR: '',
    init: function () {
      this.setFishColor(); this.setParameters(), this.reconstructMethods(), this.setup(), this.bindEvent(), this.render()
    },
    setFishColor: function () {
      let isDark = JSON.parse(localStorage.getItem('dark')) || JSON.parse('false');
      if (isDark) {
        this.FISH_COLOR = '#222'; // 暗黑色，有时间把这整成一个变量
      } else {
        this.FISH_COLOR = '' || '#42b983';
      }
    },
    setParameters: function () {
      this.$window = $(window), this.$container = $("#j-fish-skip"), this.$canvas = $("<canvas />"), this.context = this.$canvas.appendTo(this.$container).get(0).getContext("2d"), this.points = [], this.fishes = [], this.watchIds = []
    },
    createSurfacePoints: function () {
      var t = Math.round(this.width / this.POINT_INTERVAL);
      this.pointInterval = this.width / (t - 1), this.points.push(new SURFACE_POINT(this, 0));
      for (var i = 1; i < t; i++) {
        var e = new SURFACE_POINT(this, i * this.pointInterval),
          h = this.points[i - 1];
        e.setPreviousPoint(h), h.setNextPoint(e), this.points.push(e)
      }
    },
    reconstructMethods: function () {
      this.watchWindowSize = this.watchWindowSize.bind(this), this.jdugeToStopResize = this.jdugeToStopResize.bind(this), this.startEpicenter = this.startEpicenter.bind(this), this.moveEpicenter = this.moveEpicenter.bind(this), this.reverseVertical = this.reverseVertical.bind(this), this.render = this.render.bind(this)
    },
    setup: function () {
      this.points.length = 0, this.fishes.length = 0, this.watchIds.length = 0, this.intervalCount = this.MAX_INTERVAL_COUNT, this.width = this.$container.width(), this.height = this.$container.height(), this.fishCount = this.FISH_COUNT * this.width / 500 * this.height / 500, this.$canvas.attr({
        width: this.width,
        height: this.height
      }), this.reverse = !1, this.fishes.push(new FISH(this)), this.createSurfacePoints()
    },
    watchWindowSize: function () {
      this.clearTimer(), this.tmpWidth = this.$window.width(), this.tmpHeight = this.$window.height(), this.watchIds.push(setTimeout(this.jdugeToStopResize, this.WATCH_INTERVAL))
    },
    clearTimer: function () {
      for (; this.watchIds.length > 0;) clearTimeout(this.watchIds.pop())
    },
    jdugeToStopResize: function () {
      var t = this.$window.width(),
        i = this.$window.height(),
        e = t == this.tmpWidth && i == this.tmpHeight;
      this.tmpWidth = t, this.tmpHeight = i, e && this.setup()
    },
    bindEvent: function () {
      this.$window.on("resize", this.watchWindowSize), this.$container.on("mouseenter", this.startEpicenter), this.$container.on("mousemove", this.moveEpicenter)
    },
    getAxis: function (t) {
      var i = this.$container.offset();
      return {
        x: t.clientX - i.left + this.$window.scrollLeft(),
        y: t.clientY - i.top + this.$window.scrollTop()
      }
    },
    startEpicenter: function (t) {
      this.axis = this.getAxis(t)
    },
    moveEpicenter: function (t) {
      var i = this.getAxis(t);
      this.axis || (this.axis = i), this.generateEpicenter(i.x, i.y, i.y - this.axis.y), this.axis = i
    },
    generateEpicenter: function (t, i, e) {
      if (!(i < this.height / 2 - this.THRESHOLD || i > this.height / 2 + this.THRESHOLD)) {
        var h = Math.round(t / this.pointInterval);
        h < 0 || h >= this.points.length || this.points[h].interfere(i, e)
      }
    },
    reverseVertical: function () {
      this.reverse = !this.reverse;
      for (var t = 0, i = this.fishes.length; t < i; t++) this.fishes[t].reverseVertical()
    },
    controlStatus: function () {
      for (var t = 0, i = this.points.length; t < i; t++) this.points[t].updateSelf();
      for (t = 0, i = this.points.length; t < i; t++) this.points[t].updateNeighbors();
      this.fishes.length < this.fishCount && 0 == --this.intervalCount && (this.intervalCount = this.MAX_INTERVAL_COUNT, this.fishes.push(new FISH(this)))
    },
    render: function () {
      requestAnimationFrame(this.render), this.controlStatus(), this.context.clearRect(0, 0, this.width, this.height), this.context.fillStyle = this.FISH_COLOR;
      for (var t = 0, i = this.fishes.length; t < i; t++) this.fishes[t].render(this.context);
      this.context.save(), this.context.globalCompositeOperation = "xor", this.context.beginPath(), this.context.moveTo(0, this.reverse ? 0 : this.height);
      for (t = 0, i = this.points.length; t < i; t++) this.points[t].render(this.context);
      this.context.lineTo(this.width, this.reverse ? 0 : this.height), this.context.closePath(), this.context.fill(), this.context.restore()
    }
  },
  SURFACE_POINT = function (t, i) {
    this.renderer = t, this.x = i, this.init()
  };
  SURFACE_POINT.prototype = {
    SPRING_CONSTANT: .03,
    SPRING_FRICTION: .9,
    WAVE_SPREAD: .3,
    ACCELARATION_RATE: .01,
    init: function () {
      this.initHeight = this.renderer.height * this.renderer.INIT_HEIGHT_RATE, this.height = this.initHeight, this.fy = 0, this.force = {
        previous: 0,
        next: 0
      }
    },
    setPreviousPoint: function (t) {
      this.previous = t
    },
    setNextPoint: function (t) {
      this.next = t
    },
    interfere: function (t, i) {
      this.fy = this.renderer.height * this.ACCELARATION_RATE * (this.renderer.height - this.height - t >= 0 ? -1 : 1) * Math.abs(i)
    },
    updateSelf: function () {
      this.fy += this.SPRING_CONSTANT * (this.initHeight - this.height), this.fy *= this.SPRING_FRICTION, this.height += this.fy
    },
    updateNeighbors: function () {
      this.previous && (this.force.previous = this.WAVE_SPREAD * (this.height - this.previous.height)), this.next && (this.force.next = this.WAVE_SPREAD * (this.height - this.next.height))
    },
    render: function (t) {
      this.previous && (this.previous.height += this.force.previous, this.previous.fy += this.force.previous), this.next && (this.next.height += this.force.next, this.next.fy += this.force.next), t.lineTo(this.x, this.renderer.height - this.height)
    }
  };
  var FISH = function (t) {
    this.renderer = t, this.init()
  };
  FISH.prototype = {
    GRAVITY: .4,
    init: function () {
      this.direction = Math.random() < .5, this.x = this.direction ? this.renderer.width + this.renderer.THRESHOLD : -this.renderer.THRESHOLD, this.previousY = this.y, this.vx = this.getRandomValue(4, 10) * (this.direction ? -1 : 1), this.renderer.reverse ? (this.y = this.getRandomValue(1 * this.renderer.height / 10, 4 * this.renderer.height / 10), this.vy = this.getRandomValue(2, 5), this.ay = this.getRandomValue(.05, .2)) : (this.y = this.getRandomValue(6 * this.renderer.height / 10, 9 * this.renderer.height / 10), this.vy = this.getRandomValue(-5, -2), this.ay = this.getRandomValue(-.2, -.05)), this.isOut = !1, this.theta = 0, this.phi = 0
    },
    getRandomValue: function (t, i) {
      return t + (i - t) * Math.random()
    },
    reverseVertical: function () {
      this.isOut = !this.isOut, this.ay *= -1
    },
    controlStatus: function (t) {
      this.previousY = this.y, this.x += this.vx, this.y += this.vy, this.vy += this.ay, this.renderer.reverse ? this.y > this.renderer.height * this.renderer.INIT_HEIGHT_RATE ? (this.vy -= this.GRAVITY, this.isOut = !0) : (this.isOut && (this.ay = this.getRandomValue(.05, .2)), this.isOut = !1) : this.y < this.renderer.height * this.renderer.INIT_HEIGHT_RATE ? (this.vy += this.GRAVITY, this.isOut = !0) : (this.isOut && (this.ay = this.getRandomValue(-.2, -.05)), this.isOut = !1), this.isOut || (this.theta += Math.PI / 20, this.theta %= 2 * Math.PI, this.phi += Math.PI / 30, this.phi %= 2 * Math.PI), this.renderer.generateEpicenter(this.x + (this.direction ? -1 : 1) * this.renderer.THRESHOLD, this.y, this.y - this.previousY), (this.vx > 0 && this.x > this.renderer.width + this.renderer.THRESHOLD || this.vx < 0 && this.x < -this.renderer.THRESHOLD) && this.init()
    },
    render: function (t) {
      t.save(), t.translate(this.x, this.y), t.rotate(Math.PI + Math.atan2(this.vy, this.vx)), t.scale(1, this.direction ? 1 : -1), t.beginPath(), t.moveTo(-30, 0), t.bezierCurveTo(-20, 15, 15, 10, 40, 0), t.bezierCurveTo(15, -10, -20, -15, -30, 0), t.fill(), t.save(), t.translate(40, 0), t.scale(.9 + .2 * Math.sin(this.theta), 1), t.beginPath(), t.moveTo(0, 0), t.quadraticCurveTo(5, 10, 20, 8), t.quadraticCurveTo(12, 5, 10, 0), t.quadraticCurveTo(12, -5, 20, -8), t.quadraticCurveTo(5, -10, 0, 0), t.fill(), t.restore(), t.save(), t.translate(-3, 0), t.rotate((Math.PI / 3 + Math.PI / 10 * Math.sin(this.phi)) * (this.renderer.reverse ? -1 : 1)), t.beginPath(), this.renderer.reverse ? (t.moveTo(5, 0), t.bezierCurveTo(10, 10, 10, 30, 0, 40), t.bezierCurveTo(-12, 25, -8, 10, 0, 0)) : (t.moveTo(-5, 0), t.bezierCurveTo(-10, -10, -10, -30, 0, -40), t.bezierCurveTo(12, -25, 8, -10, 0, 0)), t.closePath(), t.fill(), t.restore(), t.restore(), this.controlStatus(t)
    }
  }, $(function () {
    RENDERER.init()
    $('.dark').click(function () {
      setTimeout(() => {
        RENDERER.setFishColor();
        RENDERER.context.fill();
      });
    })
  });
</script>
  <div class="footer bg-color">
    <div class="footer-main">
      
        
          <div class="link">
            
              
                <a href="mailto:2985409357@qq.com" class="social">
                  
                    <i class="fa fa-envelope" aria-hidden="true"></i>
                  
                </a>
              
            
              
                <a target="_blank" rel="noopener" href="https://github.com/yangyang-linux" class="social">
                  
                    <i class="fab fa-github" aria-hidden="true"></i>
                  
                </a>
              
            
              
                <a href="tencent://AddContact/?fromId=50&amp;fromSubId=1&amp;subcmd=all&amp;uin=2985409357" class="social">
                  
                    <i class="fab fa-qq" aria-hidden="true"></i>
                  
                </a>
              
            
          </div>
        
      
        
          <div class="footer-copyright">
            <p>Copyright © 2019 - <span id="display_copyright_time"></span> <a target="_blank" rel="noopener" href="https://gitee.com/yangyang-linux">yangyang-linux</a> | Powered by <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/">Hexo</a> | Theme <a target="_blank" rel="noopener" href="https://github.com/yuang01/theme">Bamboo</a></p>

          </div>
        
      
        
          
            <!-- 不蒜子统计 -->
            <!-- 不蒜子统计 -->
<span id="busuanzi_container_site_pv">
      <i class="fas fa-eye" aria-hidden="true"></i>本站总访问量：<span id="busuanzi_value_site_pv"></span> 次
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv" style='display:none'>
      <i class="fas fa-users" aria-hidden="true"></i>本站访客数：<span id="busuanzi_value_site_uv"></span> 人
</span>

          
        
      
        
          <div class="footer-custom">
            
              <div><p><span>本博客已萌萌哒地运行</span><span id="display_live_time"></span></p>
</div>
            
          </div>
        
      
		</br>
		</br>
		</br>
    </div>
  </div>



    <!-- 渲染暗黑按钮 -->
    
      <div class="dark">
  <div class="dark-content">
    <i class="fas fa-moon" aria-hidden="true"></i>
    <!-- <span>关灯</span> -->
  </div>
  
</div>

<script>
  $(function() {
    let isDark = JSON.parse(localStorage.getItem('dark'))  || JSON.parse('false');
    if (isDark) {
      $(".dark-content").replaceWith(
          `
          <div class='dark-content'>
            <i class="fas fa-lightbulb" aria-hidden="true"></i>
          </div>
          `
        );
    }
    $('.dark').click(function() {
      if ($(document.body).is('.darkModel')) {
        $(document.body).removeClass('darkModel');
        localStorage.setItem('dark', false);
        $(".dark-content").replaceWith(
          `
          <div class='dark-content'>
            <i class="fas fa-moon" aria-hidden="true"></i>
          </div>
          `
        );
      } else {
        $(document.body).addClass('darkModel');
        localStorage.setItem('dark', true);
        $(".dark-content").replaceWith(
          `
          <div class='dark-content'>
            <i class="fas fa-lightbulb" aria-hidden="true"></i>
          </div>
          `
        );
      }
    })
  })
</script>
    
    <!-- 渲染回到顶部按钮 -->
    
      <div class="goTop top-btn-color" pointer>
  <i class="fas fa-arrow-up" aria-hidden="true"></i>
</div>
<script src="/js/goTop.js"></script>

    
    <!-- 渲染左下角音乐播放器 -->
    
      <link rel="stylesheet" href="/js/aplayer/APlayer@1.10.1.min.css">
<style>
.aplayer .aplayer-lrc p {
  
  font-size: 12px;
  font-weight: 700;
  line-height: 16px !important;
}

.aplayer .aplayer-lrc p.aplayer-lrc-current {
  
  font-size: 15px;
  color: #C90041;
}


.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
  left: -66px !important;
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
  left: 0px !important;
}


</style>
<meting-js  
  class=""
  server="netease"
  type="playlist"
  id="5300120281"
  fixed='true'
  autoplay='true'
  theme='#C90041'
  loop='all'
  order='random'
  preload='auto'
  volume='0.4'
  list-folded='true'
>
</meting-js>

<!-- <style>
  #aplayer {
    position: fixed;
    left: 0;
    bottom: 300px;
  }
</style> -->
<script src="https://unpkg.com/aplayer@1.10.1/dist/APlayer.min.js"></script>
<script src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
    

    <!-- 图片放大 -->
    
      <script src="/js/fancybox/jquery.fancybox.min.js"></script>
    

    <!-- 百度解析 -->
    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <!-- 背景彩带 -->
    
      <script type="text/javascript" size="100" alpha='0.4' zIndex="-1" src="/js/ribbon.min.js"></script>
    

    <script src="/js/utils/index.js"></script>
    <script src="/js/app.js"></script>
    
    <!-- 文章目录所需js -->
<link href="/js/tocbot/tocbot.css" rel="stylesheet">
<script src="/js/tocbot/tocbot.min.js"></script>

<script>
  var headerEl = 'h1, h2, h3, h4, h5, h6',  //headers 
    content = '.post-detail',//文章容器
    idArr = {};  //标题数组以确定是否增加索引id
  //add #id
  var option = {
    // Where to render the table of contents.
    tocSelector: '.toc',
    // Where to grab the headings to build the table of contents.
    contentSelector: content,
    // Which headings to grab inside of the contentSelector element.
    headingSelector: headerEl,
    scrollSmooth: true,
    scrollSmoothOffset: -80,
    headingsOffset: -($(window).height() * 0.4 - 45),
    positionFixedSelector: '.toc-main',
    positionFixedClass: 'is-position-fixed',
    fixedSidebarOffset: 'auto',
    activeLinkClass: 'is-active-link',
    // onClick: function (e) {},
  }
  if ($('.toc').length > 0) {

    $(content).children(headerEl).each(function () {
      //去除空格以及多余标点
      var headerId = $(this).text().replace(/[\s|\~|`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\_|\+|\=|\||\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\：|\，|\。]/g, '');

      headerId = headerId.toLowerCase();
      if (idArr[headerId]) {
        //id已经存在
        $(this).attr('id', headerId + '-' + idArr[headerId]);
        idArr[headerId]++;
      }
      else {
        //id未存在
        idArr[headerId] = 1;
        $(this).attr('id', headerId);
      }
    });

    document.addEventListener("DOMContentLoaded", function () {
      tocbot.init(option);
      mobileTocClick();
    });

  }

  window.tocScrollFn = function () {
    return bamboo.throttle(function () {
      findHeadPosition();
    }, 100)()
  }
  window.addEventListener('scroll', tocScrollFn);

  const findHeadPosition = function (top) {
    if ($('.toc-list').length <= 0) {
      return false;
    }
    setTimeout(() => {  // or DOMContentLoaded 
      autoScrollToc();
    }, 0);
  }

  const autoScrollToc = function () {
    const $activeItem = document.querySelector('.is-active-link');
    const $cardToc = document.querySelector('.toc-content');
    const activePosition = $activeItem.getBoundingClientRect().top
    const sidebarScrollTop = $cardToc.scrollTop
    if (activePosition > (document.documentElement.clientHeight - 100)) {
      $cardToc.scrollTop = sidebarScrollTop + 150
    }
    if (activePosition < 100) {
      $cardToc.scrollTop = sidebarScrollTop - 150
    }
  }

  document.addEventListener('pjax:send', function () {
    if ($('.toc').length) {
      tocbot.destroy();
    }
  });

  document.addEventListener('pjax:complete', function () {
    if ($('.toc').length) {
      tocbot.init(option);
      mobileTocClick();
    }
  });
  
  // 手机端toc按钮点击出现目录
  const mobileTocClick = function () {
    const $cardTocLayout = document.getElementsByClassName('toc-aside')[0];
    const $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0];
    let right = '45px';
    if (window.innerWidth >= 551 && window.innerWidth <= 992) {
      right = '100px'
    }
    const mobileToc = {
      open: () => {
        $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: ' + right
      },

      close: () => {
        $cardTocLayout.style.animation = 'toc-close .2s'
        setTimeout(() => {
          $cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''"
        }, 100)
      }
    }
    document.getElementById('toc-mobile-btn').addEventListener('click', () => {
      if (window.getComputedStyle($cardTocLayout).getPropertyValue('opacity') === '0') mobileToc.open()
      else mobileToc.close()
    })

    $cardToc.addEventListener('click', (e) => {
      if (window.innerWidth < 992) { // 小于992px的时候
        mobileToc.close()
      }
    })
  }
</script>

<style>
  .is-position-fixed {
    position: sticky !important;
    top: 74px;
  }

  .toc-main ul {
    counter-reset: show-list;
  }

  .toc-main ul li::before {
    content: counter(item)".";
    display: block;
    position: absolute;
    left: 12px;
    top: 0;
  }
</style> 

<!-- 设置导航背景 -->
<script>
  let setHeaderClass = () => {
    const headerMenuTransparent = true;
    if (!headerMenuTransparent) { return; }
    const nav = $('#navHeader');
    const navTop = nav.outerHeight();
    const winTop = $(window).scrollTop();
    if(winTop > navTop) {
      nav.addClass('header-bg-color');
    }
    else {
      nav.removeClass('header-bg-color');
    }
  };

  let scrollCollect = () => {
    return bamboo.throttle(function (e) {
      setHeaderClass();
    }, 200)()
  }

  let initHeaderBg = () => {
    setHeaderClass();
  }

  setHeaderClass();
  window.addEventListener('scroll', scrollCollect);

  document.addEventListener('pjax:send', function () {
    window.removeEventListener('scroll', scrollCollect)
  })
  document.addEventListener('pjax:complete', function () {
    window.addEventListener('scroll', scrollCollect);
    setHeaderClass();
  })
</script> 

<!-- 渲染issues标签里的内容 -->
<script>
  function loadIssuesJS() {
    if ($(".post-detail").find(".issues-api").length == 0) {
      return;
    } 
    loadScript('/js/issues/index.js');
  };
  $(function () {
    loadIssuesJS();
  });
  document.addEventListener('pjax:complete', function () {
    if (typeof IssuesAPI == "undefined") {
      loadIssuesJS();
    }
  })
</script>

<!-- 输入框打字特效 -->
<!-- 输入框打字特效 -->

  <script src="/js/activate-power-mode.js"></script>
  <script>
    POWERMODE.colorful = true;  // 打开随机颜色特效
    POWERMODE.shake = false;    // 关闭输入框抖动
    document.body.addEventListener('input', POWERMODE);//监听打字事件
  </script>


<!-- markdown代码一键复制功能 -->

  <link rel="stylesheet" href="https://unpkg.com/v-plugs-ayu/lib/ayu.css">
  <script src="https://unpkg.com/v-plugs-ayu/lib/ayu.umd.min.js"></script>
  <script src="/js/clipboard/clipboard.min.js"></script>
  <div id="appCopy">
  </div>
  <script data-pjax>
    var vm = new Vue({
      el: '#appCopy',
      data: {
      },
      computed: {
      },
      mounted() {
        const that = this;
        var copy = '复制';
        /* code */
        var initCopyCode = function () {
          var copyHtml = '';
          copyHtml += '<button class="btn-copy" data-clipboard-snippet="" style="position:absolute;top:0;right:0;z-index:1;">';
          copyHtml += '<i class="fas fa-copy"></i><span>' + copy + '</span>';
          copyHtml += '</button>';
          $(".post-detail pre").not('.gutter pre').wrap("<div class='codeBox' style='position:relative;width:100%;'></div>")
          $(".post-detail pre").not('.gutter pre').before(copyHtml);
          new ClipboardJS('.btn-copy', {
            target: function (trigger) {
              return trigger.nextElementSibling;
            }
          });
        }
        initCopyCode();
        $('.btn-copy').unbind('click').bind('click', function () {
          doSomething();
        })
        $(document).unbind('keypress').bind('keypress', function (e) {
          if (e.ctrlKey && e.keyCode == 67) {
            doSomething();
          }
        })

        function doSomething() {
          that.$notify({
            title: "成功",
            content: "代码已复制，请遵守相关授权协议。",
            type: 'success'
          })
        }
      },
      methods: {
      },
      created() { }
    })
  </script>
  

<!-- 图片懒加载 -->
<script defer src="https://unpkg.com/vanilla-lazyload@17.1.0/dist/lazyload.min.js"></script>
<script>
  // https://www.npmjs.com/package/vanilla-lazyload
  // Set the options globally
  // to make LazyLoad self-initialize
  window.lazyLoadOptions = {
    elements_selector: ".lazyload",
    threshold: 0
  };
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window.addEventListener(
    "LazyLoad::Initialized",
    function (event) {
      window.lazyLoadInstance = event.detail.instance;
    },
    false
  );
  document.addEventListener('DOMContentLoaded', function () {
    lazyLoadInstance.update();
  });
  document.addEventListener('pjax:complete', function () {
    lazyLoadInstance.update();
  });
</script>


<!-- 卡片滚动动画 -->

    <script type="text/javascript">
  loadScript("https://unpkg.com/scrollreveal@4.0.6/dist/scrollreveal.min.js")
  function pjax_scrollrebeal() {
    ScrollReveal().reveal('.reveal', {
      distance: '120px',
      duration: '400',
      interval: '30',
      scale: '1',
      origin: 'bottom', // 动画开始的方向
      easing: 'ease'
    });
  }
  $(function () {
    var checkScrollReveal = setInterval(function () {
      if ($("#safearea").css("display") != "block") return
      if (typeof ScrollReveal == "undefined") return
      clearInterval(checkScrollReveal)
      pjax_scrollrebeal();
    }, 100)
  });
  document.addEventListener('pjax:complete', function () {
    pjax_scrollrebeal();
  })
</script>
   

<!-- 评论所需js -->

  
    <!-- 弹幕所需的css和js -->
    
  <!-- 弹幕插件 -->
  <link href="/js/danmu/barrager.css" rel="stylesheet">
  <script src="/js/danmu/jquery.barrager.js"></script>

<!-- 具体js，请前往valine/script.ejs查看 -->

    <script>
  var requiredFields = 'nick';
  requiredFields = requiredFields.split(',');
  comment_el = '.comment';
  let looperValine = null;
  load_valine = function () {
    if ($(comment_el).length) {
      var valine = new Valine({
        el: '#vcomment',
        path: window.location.pathname,
        notify: false,
        verify: false,
        app_id: "HvvYcruryPsiW2egxIpRnlKV-gzGzoHsz",
        app_key: "MLKN1tH2RNDMR4e3O9PJgAh5",
        placeholder: "客官，说点什么吧（如果想让我及时收到的话可以连续发送两遍，会触发邮件提醒机制）",
        avatar: "wavatar",
        master: "3d28ff93d17df2e86f7971eda5159791",   //博主邮箱md5
        tagMeta: ["博主","小伙伴","访客"],     //标识字段名
        friends: "8b42635701290c05327f3faba356ce6e",
        metaPlaceholder: { "nick": "昵称/QQ号", "mail": "邮箱" },
        requiredFields: requiredFields,
        enableQQ: true,
      });
      function debounce(fn) {
        var timerID = null
        return function () {
          var arg = arguments[0]   //获取事件
          if (timerID) {
            clearTimeout(timerID)
          }
          timerID = setTimeout(function () {
            fn(arg)              //事件传入函数
          }, 200)
        }
      }
      //查询评论 valine.Q('*').limit(7) -- 查询所有，限制7条, 下面的的代码是查询当前页面
      var themeDanmu = eval('true');
      var themeLoop = eval('false');
      var themeLooperTime = '5000' || 5000;
      var speed = '20' || 20;
      var isBarrager = true;
      if (themeDanmu == true) {
        do_barrager();
        if ($('.danmuBox').length <= 0) {
          $('.navbar').append('<div class="danmuBox"><div class="danmuBtn open"><span class="danmuCircle"></span><span class="danmuText">弹幕</span></div></div>');
        }
        $('.danmuBtn').on('click', debounce(
          function () {
            if ($('.danmuBtn').hasClass('open')) {
              $('.danmuBtn').removeClass('open')
              clearInterval(looperValine);
              $.fn.barrager.removeAll();
            } else {
              $('.danmuBtn').addClass("open");
              do_barrager();
            }
          }
        ))
      }
      function do_barrager() {
        isBarrager && valine.Q(window.location.pathname).find().then(function (comments) {
          // var num = 0; // 可以记录条数，循环调用的时候只取最新的评论放入弹幕中
          var run_once = true;
          var looper_time = themeLooperTime;
          var total = comments.length;
          // var looper = null;
          var index = 0;
          if (total > 0) {
            barrager();
          } else {
            // 当评论数为0的时候，自动关闭弹幕
            // $('.danmuBtn').removeClass('open');
          }
          function barrager() {
            if (run_once) {
              //如果是首次执行,则设置一个定时器,并且把首次执行置为false
              looperValine = setInterval(barrager, looper_time);
              run_once = false;
            }
            var content = comments[index]._serverData.comment;
            var email = comments[index]._serverData.mail;
            var link = comments[index]._serverData.link;
            var newcontent = content.substring(0, 50).replace(/<[^>]+>/g, "");
            //发布一个弹幕
            const item = {
              img: `https://q1.qlogo.cn/g?b=qq&nk=${email}&s=640`, //图片 
              info: newcontent, //文字 
              href: link, //链接 
              close: true, //显示关闭按钮 
              speed: speed, //延迟,单位秒,默认6 
              color: '#fff', //颜色,默认白色 
              old_ie_color: '#000000', //ie低版兼容色,不能与网页背景相同,默认黑色
            }
            $('body').barrager(item);
            //索引自增
            index++;
            //所有弹幕发布完毕，清除计时器。
            if (index == total) {
              clearInterval(looperValine);
              if (themeLoop === true) {
                setTimeout(function () {
                  do_barrager();
                }, 5000);
              } else {
                $('.danmuBtn').removeClass('open');
              }
              return false;
            }

          }
        })
      }
    }
  };
  $(document).ready(load_valine);
  document.addEventListener('pjax:send', function (e) {
    
      $('.danmuBox').length > 0 && $('.danmuBox').remove()
      looperValine && clearInterval(looperValine);
      $.fn.barrager.removeAll();
    
  })
  document.addEventListener('pjax:complete', function () {
    load_valine();
  });
</script>

  


<!-- 鼠标点击特效 -->
<!-- 爱心点击 -->

  
    <script src="/js/cursor/fireworks.js"></script>
  




  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" data-pjax></script>


    <!-- pjax -->
    

<!-- pjax -->


  <script src="/js/pjax@0.2.8/index.js"></script>
  
    <!-- 样式位于：source/css/_third-party/pjaxanimate.styl -->

<div class="pjax-animate">
  
    <div class="loading-circle"><div id="loader-circle"></div></div>
    <script>
      window.ShowLoading = function() {
        $(".loading-circle").css("display", "block");
      };
      window.HideLoading = function() {
        $(".loading-circle").css("display", "none");
      }
    </script>
  
	<script>
    document.addEventListener('pjax:complete', function () {
      window.HideLoading();
    })
    document.addEventListener('pjax:send', function () {
      window.ShowLoading();
    })
    document.addEventListener('pjax:error', function () {
      window.HideLoading();
    })
	</script>
</div>

  

  <script>
    var pjax = new Pjax({
      elements: 'a[href]:not([href^="#"]):not([href="javascript:void(0)"]):not([no-pjax])',   // 拦截正常带链接的 a 标签
      selectors: ["#pjax-container","title"],                                   // 根据实际需要确认重载区域
      cacheBust: false,   // url 地址追加时间戳，用以避免浏览器缓存
      timeout: 5000
    });

    document.addEventListener('pjax:send', function (e) {

      try {
        var currentUrl = window.location.pathname;
        var targetUrl = e.triggerElement.href;
        var banUrl = [""];
        if (banUrl[0] != "") {
          banUrl.forEach(item => {
            if(currentUrl.indexOf(item) != -1 || targetUrl.indexOf(item) != -1) {
              window.location.href = targetUrl;
            }
          });
        }
      } catch (error) {}

      $(window).unbind('resize');
      $(window).unbind('scroll');
      $(document).unbind('scroll');
      $(document).unbind('click');
      $('body').unbind('click');

    })
    
    document.addEventListener('pjax:complete', function () {
      $('script[data-pjax], .pjax-reload script').each(function () {
        $(this).parent().append($(this).remove());
      });
    });

    document.addEventListener('pjax:error', function (e) {
      window.location.href = e.triggerElement.href;
    })
    
    // 刷新不从顶部开始
    document.addEventListener("DOMContentLoaded", function () {
      history.scrollRestoration = 'auto';
    })
  </script>



  </body>
</html>